轻松滚动到锚链接？

我正在使用这块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 
});

来源

2017-04-22 JulianJ

的jQuery animate()需要定时功能作为参数

语法

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

所以，你可以添加

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

默认情况下它是swing其进展稍慢在动画的开始和结束时比它d oes在动画中间很像放松和进出。然后有linear在整个动画中以不变的速度前进。

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

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

来源

2017-04-22 18:00:20

感谢这一点，但由于某些原因，当我添加线性或摆动代码停止工作。 – JulianJ

@JulianJ你可以添加一个片段或小提琴的问题！ –

我在这里为此做了一个小提琴。正如你可以看到与摆动动画不起作用，但如果我删除摆动它确实工作。：https://jsfiddle.net/jsykes/9hw6bedL/3/ – JulianJ

轻松滚动到锚链接？

回答

相关问题