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

时间:2017-10-20 13:04:39

标签: javascript jquery html css smooth-scrolling

我正在尝试创建从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>

1 个答案:

答案 0 :(得分:2)

首先,您是否在项目中加载了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;