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

时间:2017-01-19 03:44:44

标签: javascript onmouseover

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

1 个答案:

答案 0 :(得分:0)

我希望我对你的问题的理解是正确的。你有一个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)。

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