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

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

1
  <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
2
  <script>
3
$(document).ready(function(){
4
5
  $(".gotop").click(function(){
6
    $(document.body).animate({'scrollTop':0},100);
7
  });
8
    //滚动到顶部
9
10
  $(".gotags").click(function(){
11
    $(document.body).animate({scrollTop: $('#tags').offset().top}, 1000);
12
  });
13
    //滚动到id为tags元素所在位置
14
15
});
16
  </script>

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

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

模拟页面HTML结构DEMO

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