Javascript实现神奇的页面滚动控制

关注

转载最新推荐文章于 2026-09-23 09:00:47 发布 6k 阅读 AI 写同款· GEO 优化 ›

js滚动条操作（整理）原理：body的scollHeight 如果大于浏览器的innerHeight 则就会出现滚动条。原理：设置div出现滚动条，滚动条的宽度= 元素的offsetWidth-clientWidth。阅读详情

Javascript实现神奇的页面滚动控制

首先，当我移动鼠标到这个指示器上面时，页面就会自动向上滚动，当移动鼠标到指示器下面时，页面就会自动向下滚动。我们不得不感叹新技术带来的神奇！它让我们费了更少的力气，完成同等的工作。但是，是否能在HTML页面上制作这样一个指示器呢？答案当然是：完全可以！请跟我来。

实现思路
1、首先，准备好2个图形文件，一个代表向上，另一个代表向下。
2、然后，进行页面布局，我们可以将这个指示器图标放在你想要的任意位置，这里我们假设它位于当前窗口的右下部。
3、针对不同的浏览器，设置好相应的对象变量。这里，我们只考虑当前2种主流浏览器：IE和Netscape。
4、对2个指示器图标，分别设置onmouseover与onmouseout事件处理，生成当前操作状态。然后据此执行定时滚动函数，实现页面的滚动效果。

 
 < HTML >
  < HEAD > 
    < META http-equiv=Content-Type content="text/html; charset=gb2312" > 
    < STYLE type=text/css > 
      < !-- 
        /*设置一个样式 
        #item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute } 
      -- > 
    < /STYLE > 
   
    < SCRIPT language=JavaScript > 
      < !--   
        //设置变量 
        //设置变量isNS，判别浏览器类型。对于NetScape浏览器，document.layers返回true值 
        var isNS=(document.layers); 
        //设置引用对象时的变量名称 
        //对于IE浏览器，可见控制的引用值为document.all.object.style.visibility=visible 
        //对于Ns浏览器，可见控制的引用值为document.object.visibility=show 
        var _all=(isNS)? '' : 'all.' ; 
        var _style=(isNS)? '' : '.style' ; 
        var _visible=(isNS)? 'show' : 'visible'; 
   
        //设置其他变量：w_x与w_y：坐标值，okscroll：滚动与否，godown：是否向下 
        var w_x, w_y, item, okscroll=false, godown; 
   
        //初始化运行函数 
        function init()
        {   
          //将引用的对象赋值给item变量，这样，在随后的对象赋值操作中，可以简化代码的编写，并保持兼容性 
          //注意：这是一个非常好的编程习惯 
          item=eval('document.'+_all+'item'+_style); 
          //取得当前窗口的尺寸大小等参数，并移动指示器到屏幕的右下角 
          getwindowsize(); 
   
          //使指示器可见 
          item.visibility=_visible; 
   
          //启动滚动判断定时函数，监测操作动作 
          scrollpage(); 
        } 
   
        //取得当前窗口大小参数，并根据这些数值移动指示器到屏幕右下角 
        //注意：当用鼠标改变窗口的大小时，要根据当前最新的窗口长宽参数设置指示器的位置。否则，就可能看不到停留在 
        //原来位置的指示器了。 
        function getwindowsize()
        {    
          //对于IE，document.body.clientWidth表示当前窗口的宽度，document.body.clientHeight表示高度，单位是 
          //象素px。如果是Ns浏览器，对应为window.innerWidth和window.innerHeight。 
          w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth; 
          w_y=(isNS)? window.innerHeight : document.body.clientHeight; 
   
          //接着，设置代表指示器区域的层的宽度与高度。 
          (isNS)? item.clip.width=42: item.width=42; 
          (isNS)? item.clip.height=20 : item.height=20; 
   
          //根据上面设置的参数，移动指示器到相应位置 
          moveitem(); 
        } 
   
        //移动指示器 
        function moveitem() 
        { 
   
          //对于NS浏览器 
          if (isNS) 
          { 
             item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50)) 
          }
          else
          { 
             //如果是IE，直接给层的2个属性赋值：pixelLeft代表X坐标，pixelTop代表Y坐标 
             //注意：当屏幕发生滚动时，document.body.scrollLeft与document.body.scrollTop分别代表 
             //滚动的横向距离与纵向距离。而w_x与w_y分别表示了指示器在当前窗口的相对坐标位置， 
             //所以，要对2者进行相加操作，从而得到指示器的绝对坐标位置。 
             item.pixelLeft=document.body.scrollLeft+w_x-70; 
             item.pixelTop=w_y+document.body.scrollTop-50; 
          } 
        } 
   
        //对于Ns浏览器，当窗口大小变化时，执行定时操作 
        function resizeNS() 
        { 
           //setTimeout函数设置了定时执行的操作，这里表示：每400毫秒执行document.location.reload()操作 
           setTimeout('document.location.reload()',400); 
        }
        //页面滚动控制函数 
        function scrollpage() 
        {
           status = ''; 
           //okscroll与godown都是滚动状态标志，其值由指示器层的onmouseover与onmouseout2个事件控制。 
           //window.scrollBy(x,y)控制页面滚动，x、y分别表示横向与纵向滚动的距离，单位是象素px。 
           //当设置y值更大时，每次滚动的距离也将更大。 
           if (okscroll) 
           { 
             if (godown)
             { 
                 (isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ; 
             } else { 
                 (isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ; 
             } 
           } 
   
           //页面滚动后，指示器已不再停留在我们期待的位置。所以，要再次执行移动函数移动它到屏幕的右下角。 
           //这样，看起来好像它总是在那里 ;-) 
           moveitem(); 
   
           //设置滚动函数定时执行。这里的时间，表示了监测用户操作状态的周期，越小表示越精确，但程序也将 
           //更“忙”。设置得过于长，就会产生慢动作的延迟效果，好像计算机很迟钝，当我们将鼠标点到向下指示器 
           //时，屏幕并没有马上做出反应，而是等了一段时间，才向下滚动 ;-( 
           //根据你的需要，并进行测试，设置这个数值。 
           setTimeout('scrollpage()', 158); 
        } 
   
        //页面加载后，启动相关脚本函数 
        //设置页面加载后，首先启动init函数 
        window.onload=init; 
   
       //设置当窗口大小发生变换时启动的函数 
       (isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ; 
   
      // End -- > 
    </SCRIPT> 
  </HEAD> 
  < BODY >    
    <!--用div标记定义一个层，从而可以在脚本程序中对它进行控制--> 
    <!--接着，给指示器图像添加2个事件，当它们发生时，分别设置相应的操作状态变量--> 
    < DIV id=item >
       < A onmouseover="okscroll=true; godown=true;" onmouseout=okscroll=false href="javascript:void(0)" >
         < IMG src="http://www.webjx.com/htmldata/2005-06-15/down.gif" border=0 />
      </A>
      <A onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false href="javascript:void(0)" >
        < IMG src="http://www.webjx.com/htmldata/2005-06-15/up.gif" border=0 />
      </A >
    < /DIV > 
    <P> 
       <!--以下是页面内容，写得长一些，从而能看到操作效果--> 
       < CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆ 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >用JavaScript制作页面滚动效果 
         < P >◆◆◆◆◆ End Here ◆◆◆◆◆ 
         < P >
       < /CENTER > 
    </P >
  </BODY >
</HTML > 