使用Offset.top进行Jquery平滑滚动

Question

我正在尝试创建从topNav到网页上各个部分的平滑滚动效果。在下面的代码中，我重新创建了我遇到的问题，这简直就是我似乎没有动画的滚动过程。我的链接跳转到正确的部分，我一路console.logged以确保在'click'时抓取正确的元素，但它仍然无效。

有人可以帮忙吗？最初我认为这可能与以下事实有关：我不是给出navlinks个人ID，而是将它们与类名分组。这可能是我问题的一部分吗？

$(document).ready(function() {
	
	$('.slide').click(function() {
		
		var link = $(this).attr('href');
		
		$('html,body').animate({
			scrollTop: $(link).offset().top}, 1000);
		return false;
		
		
		
		
	});
	
	
	
});

* {
	padding: 0;
	margin: 0;
}

nav {
	width: 100%;
	height: 120px;
}

div {
	width: 100%;
	height: 500px;
}

<nav>
	<a href="#first" class="slide">Section 1</a>
	<a href="#second" class="slide">Section 2</a>
	<a href="#third" class="slide">Section 3</a>
	<a href="#fourth" class="slide">Section 4</a>
</nav>

<div>
	<a name="first">Section 1</a>
</div>

<div>
	<a name="second">Section 2</a>
</div>

<div>
	<a name="third">Section 3</a> 
</div>

<div>
	<a name="fourth">Section 4</a>
</div>

Answer 1

首先，您是否在项目中加载了JQuery？

如果是这样，你在HTML中犯了一点错误。 Href属性引用ID，而不是name属性！

我的解决方案：

＆＃13;

＆＃13;

$(document).ready(function() {
	
	$('.slide').click(function() {
		
		var link = $(this).attr('href');
		
		$('html, body').animate({
			scrollTop: $(link).offset().top}, 1000);
		return false;	
	});
});

＆＃13;

* {
	padding: 0;
	margin: 0;
}

nav {
	width: 100%;
	height: 120px;
}

div {
	width: 100%;
	height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<a href="#first" class="slide">Section 1</a>
	<a href="#second" class="slide">Section 2</a>
	<a href="#third" class="slide">Section 3</a>
	<a href="#fourth" class="slide">Section 4</a>
</nav>

<div id="first">
	<a>Section 1</a>
</div>

<div id="second">
	<a>Section 2</a>
</div>

<div id="third">
	<a>Section 3</a> 
</div>

<div id="four">
	<a>Section 4</a>
</div>

＆＃13;

＆＃13;

＆＃13;