滚动到顶部按钮可使普通JS平滑页面滚动跳转/弹回

问题描述 投票:0回答:1

我目前有一个非常不错的香草JS脚本,当用户使用鼠标滚轮滚动时,该脚本可以平滑页面滚动。 (原始脚本是从此处https://stackoverflow.com/a/47206289/9817996抓取的)

将滚动条添加到顶部链接后,使用<a href="#">Scroll to top</a>为简单起见,我遇到了一个问题:单击此链接时,页面滚动到顶部,然后又跳回到原来的位置。

以下是Codepen展示的问题:https://codepen.io/kiaramelissa/pen/zYrYbbj

我也尝试过使用Javascript创建到顶部的滚动按钮,但是它做的完全相同。我想知道是否有人可以协助找出造成这种情况的原因?

我想理想地希望使滚动条保持原样,而不使用任何笨拙的插件。预先感谢您的任何想法!

javascript html smooth-scrolling
1个回答
0
投票

此代码仅在使用鼠标滚轮滚动时有效。但是有一个问题。

update()函数在向下滚动时一直被调用(向上工作正常)。这是因为moving始终为true(增量始终> 0.5)。

if (Math.abs(delta) > 0.5)

如果在其中放置console.log,您将自己看到它。

我实际上无法理解为什么选择0.5作为值,但是如果您将其设为1,则既可以向上滚动也可以向下滚动。

为了进一步了解我的观点,如果保持原样(0.5),并在完全向下滚动后尝试稍微向上滚动,您会发现该按钮可以正常工作而不会向后弹跳。

设置为1后,平滑滚动将继续在两个方向上起作用,并且当按下按钮时,它将保持不动。

但是滚动到顶部(使用按钮)不平滑!这是可以预期的,因为您的js代码仅适用于mousewheel事件,不适用于您使用的#。

[我只是说,如果您的意图是在按下按钮时进行平滑滚动,而不必关心鼠标滚轮,那么这样做会更好:css scroll-behavior或类似的javascript scroll anchor,不需要您现有的代码。

[如果要在使用鼠标滚轮时保持平滑滚动,则应在上面的链接中以及现有代码旁边使用javascript方法。

© www.soinside.com 2019 - 2024. All rights reserved.