點擊$（'。nav a）時，如何正確設置平滑滾動？

這是一個單頁網站，父項菜單項固定在內容區域中的部分。除了平滑滾動之外，所有內容都可以正確錨定並正常工作。

點擊「$（。nav a）」時如何正確設置平滑滾動？

的jQuery：

jQuery(function($) { 

    var services = $('.services').offset().top; 
    var locations = $('.locations').offset().top; 
    var about = $('.about').offset().top; 
    var contact = $('.contact').offset().top; 

    $(window).scroll(function() { 
    var scrollPos = $(document).scrollTop(); 
    if (scrollPos >= services && scrollPos < locations) { 
     $('.nav a').removeClass('active'); 
     $('.wsite-nav-2 a').addClass('active'); 
    } else if (scrollPos >= locations && scrollPos < about) { 
     $('.nav a').removeClass('active'); 
     $('.wsite-nav-3 a').addClass('active'); 
    } else if (scrollPos >= about && scrollPos < contact) { 
     $('.nav a').removeClass('active'); 
     $('.wsite-nav-4 a').addClass('active'); 
    } else if (scrollPos >= contact) { 
     $('.nav a').removeClass('active'); 
     $('.wsite-nav-5 a').addClass('active'); 
    } else if (scrollPos <= services) { 
     $('.nav a').removeClass('active'); 
     $('.wsite-nav-1 a').addClass('active'); 
    } 
    }); 

    $('.wsite-nav-1 a').addClass('active'); 

    $('.nav a').click(function() { 
    $('.nav a, .wsite-nav-1 a').removeClass('active'); 
    $(this).addClass('active'); 
    var target = $('.anchor-link').offset().top; 
    $('html, body').animate({ 
     scrollTop: jQuery(jQuery(this).attr('href')).offset().top 
    }, 500); 
    return false; 
    }); 
});

HTML：

<div class="nav"> 
    <ul> 
    <li class="wsite-nav-1"><a href="#">Home</a></li> 
    <li class="wsite-nav-2"><a href="#">Services</a></li> 
    <li class="wsite-nav-3"><a href="#">Locations</a></li> 
    <li class="wsite-nav-4"><a href="#">About</a></li> 
    <li class="wsite-nav-5"><a href="#">Contact</a></li> 
    </ul> 
</div> 

<div class="content"> 
    <div class="anchor"> 
    <a name="A" class="anchor-link services"></a> 
    </div> 
    <div class="anchor"> 
    <a name="B" class="anchor-link locations"></a> 
    </div> 
    <div class="anchor"> 
    <a name="C" class="anchor-link about"></a> 
    </div> 
    <div class="anchor"> 
    <a name="D" class="anchor-link contact"></a> 
    </div> 
</div>

來源

2017-10-07 Weebs

使值'500'更大 –

@TemaniAfif沒有去，但感謝您的建議！ – Weebs

您的平滑滾動的代碼是完美的除了nav a鏈接的href屬性都#應該是各部分的id。我已經更新了我最近的codepen再次檢查:) https://codepen.io/bb027/pen/VMQdXL

來源

2017-10-07 15:50:46 BlackBurn027

這幾乎可以工作，但平滑滾動稍微突然，但不會像沒有平滑滾動一樣突然。我將它改爲1000，但速度沒有變化。 – Weebs

它的哪一部分是突然的？滾動到該部分或菜單突出顯示？並順便說一句，你檢查哪個瀏覽器，因爲我把動畫延遲增加到了1500，顯然它的滾動速度是最慢的，而不是400？ – BlackBurn027

一旦我點擊$（'。nav a'），滾動到錨點的鏈接稍微突然。我正在使用Chrome。我會嘗試1500，看看。 – Weebs

點擊$（'。nav a）時，如何正確設置平滑滾動？

回答

相關問題