易于滚动到锚链接?

时间:2017-04-22 17:52:41

标签: jquery

我正在使用这段jquery在页面上找到任何锚链接并让我滚动到它们。它的效果非常好,但我正在试图弄清楚如何使滚动内容滚动进出滚动。

感谢。

//Scroll to anchors
    $('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: target.offset().top -100
        }, 1000);
    }

    //end of scroll code
});

1 个答案:

答案 0 :(得分:1)

jQuery animate()将定时函数作为参数

语法是

.animate( properties [, duration ] [, easing ] [, complete ] )

所以你可以添加

$('html, body').stop().animate({
        scrollTop: target.offset().top -100
    }, 1500, "swing");

默认情况下,它是swing,它在动画的开头和结尾处的进展比在动画中间稍微慢一点,就像轻松进出一样。然后有linear在整个动画过程中以恒定的速度前进。

$('html, body').stop().animate({
        scrollTop: target.offset().top -100
    }, 1500, "linear");

您还可以尝试增加持续时间以缓和缓和过渡。