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文档，有人提出建议吗？

内容： https ://jsfiddle.net/koteva/ovf9ywb3/

Answer 1

我相信您会希望使用缓动函数来处理此问题。 默认情况下，jQuery仅处理swing缓动，您已将其传递给animate函数。 但是，您可以在插件中包含其他缓动功能。

George Smith有一个可供下载的轻量级js插件，名为jquery.easing.1.3.js ，可以为您提供帮助。 我认为easeInOutQuart听起来像是您要寻找的最接近的东西

这是一个演示小提琴

Answer 2

通过包括jQuery UI （在jQuery之后），您将可以使用此处列出的缓动

您的代码应如下所示：

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