平滑 JavaScript/jQuery 滾動到元素

Question

我正在嘗試制作一個水平滾動網站，但我不知道如何從一個元素平滑滾動到另一個元素。 我嘗試了以下代碼：

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

但它只滾動到頂部，我也嘗試了 jQuery 插件ScrollTo ，但我無法讓它工作，我也嘗試了 jQuery 插件：

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

但也沒有成功。

有誰知道我可以使用的一個很好的、易於理解的示例？ 提前致謝！

Answer 1

未經測試

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

Answer 2

如果您必須/需要避免使用 jQuery，這里是 vanilla 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");

我希望它有幫助:)