脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 返回顶部效果

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

 更新时间：2016年12月05日 10:34:55   作者：劳卜  
本文分享了网页中经常出现的返回顶部效果，相比原生Javascript,jquery实现起来能够省略不少代码。希望对大家有所帮助

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

相比原生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方法可以很快实现返回顶部的动画效果。

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论