jQuery中页面返回顶部的方法总结

网络编程 2021-07-04 19:20www.168986.cn编程入门

本文给大家了关于jquery中页面返回顶部的方法小结，以及各个方法的优缺点介绍，非常不错，具有参考借鉴价值，需要的朋友参考下吧

当页面过长时，通常会在页面下方有一个返回顶部的button，一下，大概三种实现方法，狼蚁网站SEO优化说下各方法及优缺点。

方法一锚点定位

<a href="#" class="" id="">返回頂部</a>

这种方法设置方便，但缺点是会刷新页面（我是在同事的乐视手机上发现的）。

方法二 window.scrollTo(x,y)

<a href="javascript:scrollTo(0,0)" class="" id="">返回頂部</a>

这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。

scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标，比如我设置scrollTo(100,100)，就是让滚动内容的坐标（100,100）的点处在视口的左上角。

方法三设置带有动画效果的滚动

原生方法

/ html部分 /
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="javascript:;" class="" id="">返回頂部</a>
</body>
<style>
/ css部分 /
div {
  height: 150px;
}
div:nth-child(odd) {
  background-color: #8ae238;
}
div:nth-child(even) {
  background-color: #66d9ef;
}
. {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background-color: white;
  display: none;
}
</style>
<script>
/ js代码 /
  var Btn = document.getElementById('');
  // 获取视窗高度
  var winHeight = document.documentElement.clientHeight;
  window.onscroll = function () {
    // 获取页面向上滚动距离，chrome浏览器识别document.body.scrollTop，而火狐识别document.documentElement.scrollTop，这里做了兼容处理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滚动超过一屏，返回顶部按钮出现，反之隐藏
    if(toTop>=winHeight){
      Btn.style.display = 'block';
    }else {
      Btn.style.display = 'none';
    }
  }
  Btn.onclick=function () {
    var timer = setInterval(function () {
      var toTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 判断是否到达顶部，到达顶部停止滚动，没到达顶部继续滚动
      if(toTop == 0){
        clearInterval(timer);
      }else {
        // 设置滚动速度
        var speed = Math.ceil(toTop/5);
        // 页面向上滚动
        document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
      }
    },50);
  }
</script>

大概的思路就是

为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮

为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以5的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧'的感觉。
这种方法优点是有了动画效果，只是实现起来比较麻烦，狼蚁网站SEO优化介绍一下jQuery方法。

jQuery方法

jQuery方法只是在js代码部分不同，具体代码如下

<script>
/ js代码 /
$(window).on('scroll', function () {
  // 判断显示还是隐藏按钮
  if($(this).scrollTop()>=$(this).height()){
    $('#').fadeIn('slow');
  }else {
    $('#').fadeOut('slow');
  }
});
$('#').on('click',function () {
  // 设置滚动动画，这里注意使用的是$('body')不是$(window)
  $('body').animate({scrollTop:'0'},500);
});
</script>

jQuery方法的优点是方便，而且动画效果比较流畅。

这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象，因为我们是要设置body的scrollTop属性。

三个方法各有优劣，不过总体来讲，jQuery的方法更适合大多数场景。

以上所述是长沙网络推广给大家介绍的jQuery中页面返回顶部的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：JS实现改变HTML上文字颜色和内容的方法下一篇：jQuery中select与datalist制作下拉菜单时的区别浅析

jQuery中页面返回顶部的方法总结

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

jQuery中页面返回顶部的方法总结

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设