Question

我想实现一个＆＃34;滚动回顶部＆＃34;我的静态HTML网站中的按钮，就像我以前做过一百万次。所以我添加了这段代码：（第一部分是关于在一定时间后出现按钮，不要担心）

$( document ).ready(function() {

    $(window).scroll(function() {
        var scroll = $(document).scrollTop();
        var wheight = $(window).height();
        var hheight = wheight / 2;
        if(scroll >= hheight) {
            $('#scroller').css({'opacity': '1'});
        } else if (scroll <= hheight) {
            $('#scroller').css({'opacity': '0'});
        }
    });

    $('#scroller').click(function() {
        alert("click works!");
        $('html, body').animate({ scrollTop: 0 }, 500);
    });
});

按钮的显示和消失有效，它还会提示＆＃34;点击工作＆＃34;如果我点击按钮。但滚动不会起作用。我搞不清楚了。我在某处读到你不应该在你的CSS中使用height: 100%并使用

height: auto;
min-height: 100%;

代替。这不会改变一件事。我还尝试使用document作为要滚动的元素。

如果有人可以帮助我，我很高兴！

Answer 1

您的代码似乎有效：

＆＃13;

$( document ).ready(function() {

    $(window).scroll(function() {
        var scroll = $(document).scrollTop();
        var wheight = $(window).height();
        var hheight = wheight / 2;
        if(scroll >= hheight) {
            $('#scroller').css({'opacity': '1'});
        } else if (scroll <= hheight) {
            $('#scroller').css({'opacity': '0'});
        }
    });

    $('.scroll').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 500);
    });
});

＆＃13;

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
}

body {
  background: linear-gradient(to top, red, blue);
  height: 2000px;
  border: 10px solid goldenrod;
  position: relative;
}

.scroll {
  font-size: 2em;
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="scroll">scroll</button>

＆＃13;

Answer 2

我得到了它的工作！我使用了瘦身版的jQuery。一旦我切换到正常的生产版本，一切正常。

.animate（）查询不起作用

2 个答案: