首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:40:15
字体:
来源:转载
供稿:网友

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

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

接下来就直接贴代码啦:

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

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

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持武林网!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表