jq回到顶部效果

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

1、html代码

[html]  view plain  copy

1. <button class="back_to_top">返回顶部</button>  

2、css代码

[css]  view plain  copy

1. .back_to_top{  
2.     position: fixed;  
3.     bottom:30px;  
4.     right: 30px;  
5.     border:1px solid #888;  
6. }  

3、js代码

[javascript]  view plain  copy

1. var backButton=$('.back_to_top');  
2. function backToTop() {  
3.     $('html,body').animate({  
4.         scrollTop: 0  
5.     }, 800);  
6. }  
7. backButton.on('click', backToTop);  
8.   
9. $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */  
10.     if ($(window).scrollTop() > $(window).height())  
11.         backButton.fadeIn();  
12.     else  
13.         backButton.fadeOut();  
14. });  
15. $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/  

要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离    $(window).scrollTop() 或者$(document).scrollTop() ，但是前者更兼容

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

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