非常简单的代码,不需要再使用插件!
页面代码如下
<!DOCTYPE html>
<html>
<head>
<title>锚点缓慢移动</title>
</head>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style type="text/css">
nav span {padding: 10px;margin-right: 4px;}
.box {height: 400px;width: 100%;background: #e2e2e2;margin-bottom: 30px;}
</style>
<body>
<nav>
<span>介绍</span>
<span>案例</span>
<span id="team_a">团队</span>
<span>联系</span>
</nav>
<div class="box">这是介绍</div>
<div class="box">这是案例</div>
<div class="team box">这是团队</div>
<div class="box">这是联系</div>
<script type="text/javascript">
$('#team_a').click(function(){
$('html,body').animate({
scrollTop:$('.team').offset().top
}, 800);});
</script>
</body>
</html>
效果如下
![Jquery锚点缓慢移动到目标位置](https://i-blog.csdnimg.cn/blog_migrate/3e16baddec61a54deeb302dbc219ce20.gif)