javascript - 使用 javascript 的样式元素

Question

我正在尝试使用 javascript(不是 jQuery)制作一个 gototop 按钮。我希望此按钮具有延迟效果，我通过以下方式实现:

    var timeOut;
    function scrollToTop() {
      if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
       }
      else clearTimeout(timeOut);
    }

html 很简单: <div id="gototop"><a href="#header" onclick="scrollToTop();return false">Back to top</a></div>

我无法根据滚动高度显示/隐藏按钮。据我所知，在页面向下滚动 600 像素之前，以下内容应该会隐藏按钮，但这是行不通的:

    var posit = window.scrollTop();
    if (posit < 900) {
        document.getElementById("gototop").style.display = 'none';
    }

为什么这个样式没有生效？

我使用的完整代码是:

    var posit = window.scrollTop();
    if (posit < 900) {
        document.getElementById("gototop").style.display = 'none';
    }
    var timeOut;
    function scrollToTop() {
      if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
       }
       else clearTimeout(timeOut);
      }

感谢您的关注，问候。

Answer 1

尝试将其放入 onscroll 事件处理程序中，例如:

为您的 gototop 元素添加样式，例如:

<div id="gototop" onclick="scrollToTop()" style="display:none;"> </div>     


window.onscroll = function(){
    if (window.scrollY < 900) {
        document.getElementById("gototop").style.display = 'none';
    else
        document.getElementById("gototop").style.display = 'block';
}