Jquery 使用 Offset.top 平滑滚动

Question

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

有人可以帮忙吗？最初我认为这可能与这样一个事实有关，即我没有给 navlinks 个单独的 ID，而是用 class 名称将它们分组。这可能是我问题的一部分吗？

$(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，而不是一个名称属性！

我的解决方案：

$(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;
}

<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>

Jquery 使用 Offset.top 平滑滚动

Jquery Smooth Scroll Using Offset.top

html

javascript

css

jquery

smooth-scrolling