网站上随处可见页面到底部会有一个返回顶部的图标,当然实现返回顶部效果,必然会用到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方法。