Question

我正在尝试制作横向滚动网站，但我不知道如何顺利地从一个元素滚动到另一个元素。我尝试了以下代码：

$("a[href='#top']").click(function() {
  $("body").animate({ scrollTop: 0 }, "slow");
  return false;
});

但它只滚动到顶部，我也尝试了jQuery-plugin ScrollTo，但我无法让它工作，我也尝试了jQuery插件：

$('.click').click(function(){
    $.scrollTo( '.last', 800, {easing:'elasout'});
});

但也没有成功。

有谁知道我可以使用的好的，易于理解的样本？提前谢谢！

Answer 1

未经测试

   $('.click').click(function(){
        $.scrollTo( $('.last'), 800);
    });

Answer 2

万一您必须/需要避免使用jQuery，以下是适用于我们的香草JS解决方案：

function scrollToElement(myElement, scrollDuration = 500) {
    const elementExists = document.querySelector(myElement);
    if (elementExists && elementExists.getBoundingClientRect) {
        const rect = elementExists.getBoundingClientRect();
        const elementTop = rect.top + window.scrollY - 200; // a bit of space from top
        var cosParameter = (window.scrollY - elementTop) / 2,
            scrollCount = 0,
            oldTimestamp = performance.now();
        function step(newTimestamp) {
            console.log(scrollCount);
            scrollCount += Math.PI / (scrollDuration / (newTimestamp - oldTimestamp));
            if (scrollCount >= Math.PI) {
                window.scrollTo(0, elementTop);
                return;
            }
            window.scrollTo(0, Math.round(cosParameter + cosParameter * Math.cos(scrollCount)) + elementTop);
            oldTimestamp = newTimestamp;
            window.requestAnimationFrame(step);
        }
        window.requestAnimationFrame(step);
    }
}
scrollToElement("#yourElement");

我希望它会有所帮助：）

平滑的JavaScript / jQuery滚动到元素

2 个答案: