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函数中。但是，您可以使用插件包含其他缓动功能。

George Smith有一个可供帮助的轻量级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 ;
    }
);

jQuery滚动到可变速度的锚点

2 个答案: