我试图让窗口在单击按钮时实现平滑的滚动效果。 目前我有以下代码。
<div class="scroll-button" href="#thanks"><span></span>Scroll</div>
var scrollButton = document.querySelector('.scroll-button');
scrollButton.addEventListener("click", smoothScrollButton);
function smoothScrollButton() {
var scrollTheWindowButton = document.querySelector('html, body');
for (var i = 0; i < scrollTheWindowButton.length; i++) {
scrollTheWindowButton[i].animate([{scrollTop = this.offsetTop}], 500, 'linear'
)};
}
我目前在 VSC 和控制台中没有看到任何错误，因此作为一个菜鸟，这使得调试有点困难。我尝试查看 MDN 上的 .animate() 函数，但不知道我是否取得了进展。
请帮忙？
最佳答案
无需 JS，只需插入 <a> 即可实现该效果标记在您的 html 文档中您希望屏幕在单击时滚动的部分的高度。您使用 <a> 的 href 属性标签来指示该部分的 id。
HTML 文件:
<body>
<div id="section-foo"></div>
...
<a href="#section-foo">Take me foo</a>
</body>
您可以围绕<a>构建一个包装器标记并在那里应用您的样式以获得一个漂亮的按钮(text-decoration: none, background-color: some-color, border-radius: 3px;等)。
编辑:
为了让屏幕真正平滑滚动，您需要添加 scroll-behavior: smooth;属性到 css 样式表中的 body 标记。
我的每张工作表上都有这个作为样板。
*{
scroll-behavior: smooth;
}
关于javascript - 如何让按钮将窗口滚动到一定高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52809115/