<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
.selectd{
border:solid 1px blue;
background-color:#Fa13b1;
color:Yellow;
}
.unselected{
background-color:white;
color:black;
}
#inputdiv{
border:solid 1px #00dbac;
position:fixed;
left:70%;
}
#content{
padding:20px;
border:solid 1px #00aaac;
}</style><script>
var words;
var env;
var content;
var scrollY = 0;
var direction=0
function select(){

    words=document.getElementById('intxt').value;
if(words.length>=3){
setblack();
serach(words);
}
}

function setblack(){
var as=document.getElementsByTagName('span');
for(var i=0;i<as.length;i++){
as[i].className="unselected";
}
}
function serach(words){
env=document.getElementById(words);

if(env == null){
alert("没有"+words+"这个栏目")
}else{
if(env.offsetTop>= scrollY +100){
direction=0;
}else if(env.offsetTop<=scrollY-100){
direction=1;
}
scrollWindow();
var name=document.getElementById(words+'_name');
name.className="selectd";
}

}


function scrollWindow()
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
if (direction == 0)
{

if ( env.offsetTop>= scrollY +100){
window.scrollBy(0,+10);
scrollY=scrollY + 10;
}else{
clearTimeout(srcoll);
}
}
else{

if ( env.offsetTop<=scrollY){
window.scrollBy(0,-10);
scrollY=scrollY - 10;
}else{
clearTimeout(srcoll);
}
}
  var srcoll=setTimeout("scrollWindow()", 10);
  }//欢迎来到站 
</script>
</head>
<body>
<div id="inputdiv">
<input type="text" id="intxt" /><br />
<a href="javascript:void(0)" onclick="select();">turn in</a>
</div>
<div id="content">
<a id="constanine"></a><span id="constanine_name">constanine</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="smith"></a><span id="smith_name">smith</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="breake"></a><span id="breake_name">breake</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="tom"></a><span id="tom_name">Tom</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
<a id="aclie"></a><span id="aclie_name">aclie</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="john"></a><span id="john_name">john</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="jack"></a><span id="jack_name">jack</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
</body>
</html>
这个是在论坛上看到一位仁兄提出的要求,自己想想也做了下,但是这个效果在firefox,chrome都有滚屏的效果,单是到了ie下不动了。求问怎么解决JavaScriptInternet Explorer

解决方案 »

  1.   

    确切说是ie进过 xiaofanku 兄的说法,能进行,但是使用360,搜狗游览器时,就无滚屏效果了这个差异化太坑了吧
      

  2.   

    说反了吧。ie下有滚屏的(ie8),但是chrome 没有。
      

  3.   

    主要是 env.offsetTop  你现在获取的是<a> 你换成div 吧。
      

  4.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <style>
    .selectd{
    border:solid 1px blue;
    background-color:#Fa13b1;
    color:Yellow;
    }
    .unselected{
    background-color:white;
    color:black;
    }
    #inputdiv{
    border:solid 1px #00dbac;
    position:fixed;
    left:70%;
    }
    #content{
    padding:20px;
    border:solid 1px #00aaac;
    }
     
    </style>
     
    <script>
        var words;
        var env;
        var content;
        var scrollY = 0;
        var direction=0
        function select(){
             
            words=document.getElementById('intxt').value;
            if(words.length>=3){
                setblack();
                serach(words);
            }
        }
         
        function setblack(){
            var as=document.getElementsByTagName('span');
            for(var i=0;i<as.length;i++){
            as[i].className="unselected";        
            }
        }
        function serach(words){            
            env=document.getElementById(words);
             
            if(env == null){
                alert("没有"+words+"这个栏目")
            }else{
                if(env.offsetTop>= scrollY +100){
                    direction=0;
                }else if(env.offsetTop<=scrollY-100){
                    direction=1;
                }
                    scrollWindow();
                    var name=document.getElementById(words+'_name');
                    name.className="selectd";        
            }
         
        }
         
         
        function scrollWindow()
        {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
            if (direction == 0)
        {
             
            if ( env.offsetTop>= scrollY +100){
                window.scrollBy(0,+10);
                scrollY=scrollY + 10;        
            }else{
                clearTimeout(srcoll);
            }    
        }
        else{
             
            if ( env.offsetTop<=scrollY){
                window.scrollBy(0,-10);
                scrollY=scrollY - 10;
            }else{
                clearTimeout(srcoll);
            }
        }        
      var srcoll=setTimeout("scrollWindow()", 10);
      }//欢迎来到站 
    </script>
    </head>
    <body>
    <div id="inputdiv">
    <input type="text" id="intxt" /><br />
    <a href="javascript:void(0)" onclick="select();">turn in</a>
    </div>
    <div id="content">
    <div id="constanine"><span id="constanine_name">constanine</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    <div id="smith"><span id="smith_name">smith</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div>  
    <div id="breake"><span id="breake_name">breake</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    <div id="tom"><span id="tom_name">Tom</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    <div id="aclie"><span id="aclie_name">aclie</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div>  
    <div id="john"><span id="john_name">john</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div>  
    <div id="jack"><span id="jack_name">jack</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    </div>
    </body>
    </html>