平滑滚动到页面顶部和页面指定位置js
<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
<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/ )