元素随浏览器滚动条拉动而移动位置的JS效果

    很多网站由于页面很长，右侧都有一个“回到顶部”的浮动链接，可以随着滚动条的拉动而移动位置，也就是说相对于浏览器的位置不变。

    在页面添加一个JS方法：

 

    <script>

       function relocation(){
          document.body.scrollTop=0;//使浏览器滚动条位置归0，即滚动条回到顶部
      }

    </script>

 

    在页面定义一个DIV：

 

    <div οnclick="relocation()" style="position:absolute;left:1150px;width:40px;background-color:#555555;text-align:center;color:#ffffff;top:expression(parseInt(document.body.scrollTop)+200);">↑回到顶部</div>

   

    其中top:expression(parseInt(document.body.scrollTop)+200)属性就表示此DIV层距浏览器顶部的距离，document.body.scrollTop为浏览器滚动条的位置，所以这个DIV的位置是随着滚动条移动而变化的。