jQuery利用平滑滾動

Question

我在使網頁使用平滑滾動方面遇到一些困難。 我在頁面頂部有一個導航欄，上面有4個選項。 每個選項對應於頁面下方的部分。 我希望能夠在導航欄中單擊那些項，並向下平滑滾動至其相應部分。 我嘗試利用以下兩個問題（以及其他一些在線資源！），但似乎無法正常工作。 提供的任何幫助將不勝感激！ 下面是代碼的摘要版本

jQuery滾動到元素

平滑滾動錨點jQuery

的HTML

<ul id="navbar">
            <li><a class="about" href="#about">ABOUT</a></li>
            <li><a class="shop" href="#shop">SHOP</a></li>
            <li><a class= "featured" href="#featured">FEATURED</a></li>
            <li><a class="updates" href="#updates">UPDATES</a></li>
        </ul>

<div id="handcrafted"></div>
<div id="shop"></div>
<div id="featured"></div>
<div id="updates"></div>

JS

$('.about').click( function() {
     $('html, body').animate({
          scrollTop: $('#about').offset().top
     }, 400);
});


$('.shop').click( function() {
     $('html, body').animate({
          scrollTop: $('#shop').offset().top
     }, 400);
});



$('.featured').click( function() {
     $('html, body').animate({
          scrollTop: $('#featured').offset().top
     }, 400);
});



$('.updates').click( function() {
     $('html, body').animate({
          scrollTop: $('#updates').offset().top
     }, 400);
});

Answer 1

<div id="handcrafted"></div>應該是<div id="about"></div>

而且，如果您要使用<a> ，建議您一直添加e.preventDefault() ，除非您想要純正的<a> 。

 $('a').click( function(e) { e.preventDefault() $('html').animate({ scrollTop: $($(this).attr('href')).offset().top }, 400); }); 

 div{ height: 50vh; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="navbar"> <li><a class="about" href="#about">ABOUT</a></li> <li><a class="shop" href="#shop">SHOP</a></li> <li><a class= "featured" href="#featured">FEATURED</a></li> <li><a class="updates" href="#updates">UPDATES</a></li> </ul> <div id="about">ABOUT</div> <div id="shop">SHOP</div> <div id="featured">FEATURED</div> <div id="updates">UPDATES</div>