用js实现简单的点击返回顶部效果

时间: 2016-03-09 / 分类: 网站制作技术 / 浏览次数: 1,825 views / 0个评论 发表评论

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点击的时候,页面回到顶部。

要点一:document.documentElement.clientWidth || document.body.clientWidth; 获得可视区的宽度。后面是兼容chrome,前面是兼容其它浏览器。

要点二:oTop.style.left = screenw – oTop.offsetWidth +”px”;  当页面加载时,让元素的位置位于页面最右边,用可视区的宽度减去元素本身的宽度。

要点三:oTop.style.top = screenh – oTop.offsetHeight + scrolltop +”px”; 当页面滚动时,元素的Y坐标位置等于可视区的高度减去元素本身的高度,加上滚动距离。

要点四:document.documentElement.scrollTop = document.body.scrollTop =0; 当点击元素时,让页面的滚动距离为0.写两个是为了兼容。

 

 

<script>
window.onload = function(){
  var oTop = document.getElementById("to_top");
  var screenw = document.documentElement.clientWidth || document.body.clientWidth;
  var screenh = document.documentElement.clientHeight || document.body.clientHeight;
  oTop.style.left = screenw - oTop.offsetWidth +"px";
  oTop.style.top = screenh - oTop.offsetHeight + "px";
  window.onscroll = function(){
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
  }
  oTop.onclick = function(){
    document.documentElement.scrollTop = document.body.scrollTop =0;
  }
}  

</script>

发表评论

你必须 登录后 才能留言!