Javascript “滚动到顶部”按钮可使页面平滑滚动跳转/反弹

我现在有一个非常棒的香草JS脚本，当用户用鼠标滚轮滚动时，它可以平滑页面滚动。（原稿摘自此处）

使用添加滚动至顶部链接后

为了简单起见，我遇到了一个问题，单击此链接时，页面会滚动到顶部，然后又会反弹到原来的位置

下面是一个代码笔，展示了这个问题：

我也尝试过使用Javascript创建一个滚动到顶部的按钮，但它做的事情完全相同。我想知道是否有人能帮我找出这是什么原因造成的

---

理想情况下，我希望保持我的平滑滚动作为香草JS，而不是使用任何笨重的插件。提前感谢您的任何想法

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

update（）

函数在向下滚动时不断被调用（向上滚动正常）。这是因为

移动

始终为真（增量始终>0.5）

if（数学绝对值（增量）>0.5）

如果您将

console.log

放在那里，您将自己看到它

我真的不明白为什么选择

0.5

作为一个值，但是如果设置为

1

，它将同时适用于向上和向下滚动

为了进一步了解我的观点，如果您保持原样（0.5），并在向下滚动之后尝试向上滚动一点，您将看到按钮在不反弹的情况下工作

将其设为1后，“平滑滚动”将继续在两个方向上工作，当按下按钮时，它将保持向上

但是，滚动到顶部（带按钮）并不平滑！这是意料之中的，因为您的js代码只适用于mousewheel事件，而不适用于您使用的#

我只想说，如果您的目的是在按下按钮时进行平滑滚动，而不关心鼠标滚轮，那么您最好使用以下内容： 或者像这样不需要现有代码

如果您想在使用mousewheel时保持平滑滚动，那么您应该使用上面链接中的javascript方法以及现有代码

---

还有一件事：如果你按下按钮，在滚动结束之前（放松时），它会跳到顶部，然后会反弹回原来的位置。这是意料之中的，因为js scroll代码对按钮滚动行为一无所知。

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

update（）

函数在向下滚动时不断被调用（向上滚动正常）。这是因为

移动

始终为真（增量始终>0.5）

if（数学绝对值（增量）>0.5）

如果您将

console.log

放在那里，您将自己看到它

我真的不明白为什么选择

0.5

作为一个值，但是如果设置为

1

，它将同时适用于向上和向下滚动

为了进一步了解我的观点，如果您保持原样（0.5），并在向下滚动之后尝试向上滚动一点，您将看到按钮在不反弹的情况下工作

将其设为1后，“平滑滚动”将继续在两个方向上工作，当按下按钮时，它将保持向上

但是，滚动到顶部（带按钮）并不平滑！这是意料之中的，因为您的js代码只适用于mousewheel事件，而不适用于您使用的#

我只想说，如果您的目的是在按下按钮时进行平滑滚动，而不关心鼠标滚轮，那么您最好使用以下内容： 或者像这样不需要现有代码

如果您想在使用mousewheel时保持平滑滚动，那么您应该使用上面链接中的javascript方法以及现有代码

---

还有一件事：如果你按下按钮，在滚动结束之前（放松时），它会跳到顶部，然后会反弹回原来的位置。这是意料之中的，因为js scroll代码对按钮滚动行为一无所知。

我没有看到任何滚动到顶部的代码。您只在

a

标记上添加了“#”。这并不意味着你可以移动到页面顶部。它确实可以将用户滚动到页面顶部，这只是一种非常简单/基本的形式。如果你检查代码笔，它会在点击时将你带到顶部。我没有看到任何滚动到顶部的代码。您只在

a

标记上添加了“#”。这并不意味着你可以移动到页面顶部。它确实可以将用户滚动到页面顶部，这只是一种非常简单/基本的形式。如果您选中代码笔，它确实可以在单击时将您带到顶部。谢谢，将0.5更改为1确实允许我成功滚动到顶部。（我更新了代码笔以反映这一点）现在唯一的事情是，当我在顶部单击“滚动到顶部”后，页面不知道我现在在上面，如果我启动任何滚动，无论多么小，它都会再次将我弹回底部。另外，是的，这是正确的，我只想将平滑滚动的焦点放在鼠标滚轮上，我不介意返回顶部是否不平滑。谢谢，将0.5更改为1确实允许我成功地滚动到顶部。（我更新了代码笔以反映这一点）现在唯一的事情是，当我在顶部单击“滚动到顶部”后，页面不知道我现在在上面，如果我启动任何滚动，无论多么小，它都会再次将我弹回底部。另外，是的，我只想将平滑滚动的焦点放在鼠标滚轮上，我不介意返回顶部是否不平滑。