简单几步实现返回顶部效果

今天与大家分享下网页中经常出现的返回顶部效果

相比原生Javascript，jquery实现起来能够省略不少代码。

接下来就直接贴代码啦：

 1 $(function(){
 2        $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发
 3                 var wHeight=$(window).height(); //获取浏览器可视窗口高度
 4                 var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度
 5                if(wTop>=wHeight)  //当滚动条距离顶部高度超过一屏时执行
 6                 {
 7                      $("#btn").show();  //返回顶部按钮显示
 8                 }
 9                 else{
10                      $("#btn").hide();  //返回顶部按钮隐藏
11                 }
12            });
13            $("#btn").click(function(){
14                     $("html,body").animate({scrollTop:0},500);  //页面500毫秒返回顶部
15            });
16  });

 

ok，是不是很简单，jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。

如果想要更加详细的介绍，可以去观看慕课网的教程：http://www.imooc.com/learn/65