jQuery点击平滑滚动到顶部或指定id及class

经验笔记
浏览 loading

平滑滚动到页面顶部和页面指定位置js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <script src="http://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
  <script>
$(document).ready(function(){

  $(".gotop").click(function(){
    $(document.body).animate({'scrollTop':0},100);
  });
    //滚动到顶部

  $(".gotags").click(function(){
    $(document.body).animate({scrollTop: $('#tags').offset().top}, 1000);
  });
    //滚动到id为tags元素所在位置

});
  </script>

以上代码通过点击class为gotop的元素平滑滚动到页面顶部，点击class为gotags的元素时平滑滚动到id为tags的元素所在位置。

被点击的元素可以是a标签,button标签,span标签,div等任意标签，被滑动指定id所在位置也可以是任意标签，当然也可以按jQuery选择器的写法指定其他class或者tag。

模拟页面HTML结构DEMO

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="header">
  这里是页面头部
    <button class="gotags">找到标签的位置</button>
</div>
    
<div class="content" style="height:999px; background: #cecece">
这里是页面内容
</div>

<div id="tags">
  这里是页面标签
    <button class="gotop">滚回顶部</button>
</div>

Relay Tips: 一极乐（ https://yijile.com/log/501/ ）