我正在尝试创建从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>
答案 0 :(得分:2)
首先,您是否在项目中加载了JQuery?
如果是这样,你在HTML中犯了一点错误。 Href属性引用ID,而不是name属性!
我的解决方案:
$(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;