Question

我11岁，几个月前我开始学习Javascript，所以我试图制作一个页面，如果你向下滚动太多会让你回到顶部所以我做了一个Div元素填充一个大的空间和onmouseover它将带你回到顶部，但如果你第二次尝试它不会做任何事情。请帮忙。提前谢谢！

Answer 1

我希望我对你的问题的理解是正确的。你有一个div，你想在每次滚动太多时上去。

作为如何在vanilla JavaScript中处理滚动的示例，您可以查看onscroll事件的文档：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll。

以下是一个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      #container {
        height: 500px;
        width: 515px;
        overflow: auto;
      }

      #foo {
        height: 1000px;
        width: 500px;
        background-color: #777;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="foo"></div>
    </div>

    <script>
      var container = document.getElementById('container');
      container.addEventListener('scroll', function(event) {
        // Get top and left value
        var top = container.scrollTop
        if (top > 400) {
          // Go to the top
          container.scrollTop = 0;
        }
      }, false);
    </script>
  </body>
</html>

在此示例中，包含的元素大于容器，因此容器可以使用overflow: auto; css属性进行滚动。

脚本应用onscroll事件，该事件检查容器的滚动值，并在超过任意值时将其重置为0（示例中为400）。

我希望这对你的工作有用。

我有一个Div元素作为按钮，但它只能工作一次

1 个答案: