网站上随处可见页面到底部会有一个返回顶部的图标，当然实现返回顶部效果，必然会用到scrollTop方法。scrollTop通俗意思就是被卷去的高度。
下面就写一个最简单的返回顶部小例子，几句代码实现效果：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- a{
- position:fixed;
- right:50px;
- bottom:50px;
- }
- </style>
- </head>
- <body style="height:1800px;">
- <a class="backTop" style="display:none;" href="javascript:void(0)">返回顶部</a>
- </body>
- <script src="js/jquery-1.11.3.min.js"></script>
- <script>
- $(function(){
- $(window).scroll(function(){
- if($(window).scrollTop()>=600){
- $(".backTop").fadeIn();
- }else{
- $(".backTop").fadeOut();
- }
- });
- $(".backTop").click(function(){
- $("html,body").animate({scrollTop:0},1000)
- })
-
- })
- </script>
- </html>
这里需要注意的就是scrollTop方法有兼容性效果，针对ie低版本浏览器，要用html，而针对谷歌要用body，所以最后就可以直接两个都写。
比较简单的例子，就是运用scrollTop方法。
湘公网安备 43102202000103号
