jQuery的滾動與變速

Question

錨我有一個非常基本的HTML網站有幾個錨標籤。在點擊每個錨導致其他使用平滑滾動的一點點帶有此功能：

$(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); var target = this.hash; var $target = $(target); 
     $('html, body').stop().animate(
      { 
       'scrollTop': $target.offset().top - 300 
      }, 
      900, 
      'swing', 
      function() { 
       window.location.hash = target - 300 ; 
      } 
     ); 
    }); 
}); 

錨之間的差距將是相當大的，我試圖找出一種方式來獲得的速度不同 - 在一個錨點擊後，啓動速度較慢，比加快，在接近下一個錨在停止之前再次放慢。

找不到任何JQuery文檔，有人有建議嗎？

FIDDLE：https://jsfiddle.net/koteva/ovf9ywb3/

Answer 1

我相信你會希望使用緩動函數來處理這個問題。默認情況下，jQuery的只能處理swing寬鬆，你已經通過到您的animate功能。但是，您可以包括與插件額外的寬鬆政策功能。

喬治史密斯有一個輕量級的js插件下載，可以幫助你，叫jquery.easing.1.3.js。我認爲easeInOutQuart聽起來就像是最接近你正在尋找

這裏什麼是demo fiddle

Answer 2

通過包括jQuery UI（jQuery的）之後，你就可以使用漸變效果所列here

你的代碼看起來像：

$('html, body').stop().animate(
    { 
     'scrollTop': $target.offset().top - 300 
    }, 
    900, 
    'easeInOutCubic', 
    function() { 
     window.location.hash = target - 300 ; 
    } 
);