javascript - 平滑滚动到顶部

Question

我已经搜索了几个小时了，但没有找到解决方案。我想要平滑滚动到页面顶部。我已经可以通过附加到我的网站的 .js 文件平滑滚动到页面中的单独 anchor ，但我无法在顶部使用 anchor ，因为我正在使用来自免费托管网站的模板内置的页面构建工具不允许我在正文区域上方进行编辑。

Here这就是我平滑滚动的地方。我一直在尝试设置“平滑滚动到没有jquery插件的元素”，但经过无数次尝试后我不知道如何明显地安排它。我还使用了 window.scrollTo(0, 0); 但它会立即滚动。谢谢!

此外: http://jsfiddle.net/WFd3V/ - 代码可能是标签 class="smoothScroll" 因为我的其他元素使用它，但我不知道如何将它与 href="javascript:window.scrollTo 混合(0,0);" ，或任何其他可以在没有 anchor 的情况下将页面带到顶部的内容。

Answer 1

我认为最简单的解决方案是使用 window.scrollTo :

window.scrollTo({top: 0, behavior: 'smooth'});

如果你想要即时滚动，那么只需使用:

window.scrollTo({top: 0});

也可以封装在函数中:

// Scroll To Top
function scrollToTop() {
    window.scrollTo({top: 0, behavior: 'smooth'});
}

或用作 onclick 处理程序:

<button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>
   Scroll to Top
</button>