平滑 JavaScript/jQuery 滚动到元素

Posted 2023-05-08

【中文标题】平滑 JavaScript/jQuery 滚动到元素

【英文标题】：Smooth JavaScript/jQuery scroll to element

【发布时间】：2011-07-02 16:16:43

【问题描述】：

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

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

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

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

但也没有成功。

有没有人知道我可以使用的好、易于理解的示例？提前致谢！

【问题讨论】：

您需要告诉我们什么不是“工作”。你有错误信息吗？你尝试过什么调试？

【参考方案1】：

未经测试

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

【讨论】：

如果有人想看一个使用 jQuery.ScrollTo 插件的演示，他可以看看at this answer to a similar question

【参考方案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");

希望对你有帮助:)