使用Offset.top的jQuery平滑滾動

Question

我正在嘗試從topNav到網頁的各個部分創建平滑的滾動效果。 在下面的代碼中，我重新創建了我遇到的問題，這簡直使我似乎無法使滾動過程變得生動起來。 我的鏈接跳至相應的部分，並且在進行console.logged已進行了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屬性！

我的解決方案：

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