“返回顶部”按钮的实现

在很多地方，我们都会用到“返回顶部”按钮。那么这个要怎么实现呢？

1、html代码

<button class="back_to_top">返回顶部</button> 2、css代码

.back_to_top{ position: fixed; bottom:30px; right: 30px; border:1px solid #888; }3、js代码

var backButton=$('.back_to_top'); function backToTop() { $('html,body').animate({ scrollTop: 0 }, 800); } backButton.on('click', backToTop); $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */ if ($(window).scrollTop() > $(window).height()) backButton.fadeIn(); else backButton.fadeOut(); }); $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/ 要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离    $(window).scrollTop() 或者$(document).scrollTop() ，但是前者更兼容

$(window).height()   获取当前浏览器窗口的大小，浏览器拉伸大小就会变

$(document).height()  获取整个文档的高度