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

(编辑:jimmy 日期: 2026/1/29 浏览:2)

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

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

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

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。