jQuery的向上/向下滚动按钮不起作用

Question

我试图在我的网站上进行上下滚动按钮，但我一定缺少一些东西。 这是我的代码...

HTML：

<body>
    <div id="middle-body">test</div>
    <div id="toTop">^</div>
    <div id="toBottom">^</div>
</body>

JS / jQuery的：

var scrolled=0;
$(document).ready(function(){
    $("#toTop").on("click" ,function(){
        scrolled=scrolled+300;
        $("#middle-body").animate({
                scrollTop:  scrolled
        });
    });
    $("#toBottom").on("click" ,function(){
        scrolled=scrolled-300;
        $("#middle-body").animate({
                scrollTop:  scrolled
        });
    });
});

CSS：

#middle-body {
    color: white;
    background: #555;
    height: 900px;
}

#toTop {
    cursor: pointer;
    display: block;
    font-size: 100px;
    line-height: 100px;
    font-weight: bold;
    position: fixed;
    top: 40%;
    right: 10px;
    text-align: center;
}

#toBottom {
    cursor: pointer;
    display: block;
    font-size: 100px;
    font-weight: bold;
    line-height: 100px;
    position: fixed;
    bottom: 20%;
    right: 10px;
    text-align: center;
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}

#toTop:hover, #toBottom:hover {
    color: white;
}

最后但并非最不重要的是提琴！ 我仍然在学习所有这些，所以我很环保，有帮助吗？

Answer 1

middle-body没有任何可滚动的内容，不受限制。 您可能正在尝试滚动文档的正文。
scrollTop是元素内容顶部从视口顶部开始的像素数。 因此，当您要浏览该页面时，请添加至页面，而不要减去：

 var scrolled=0; $(document).ready(function(){ $("#toTop").on("click" ,function(){ scrolled=scrolled-300; $("html, body").animate({ scrollTop: scrolled }); }); $("#toBottom").on("click" ,function(){ scrolled=scrolled+300; $("html, body").animate({ scrollTop: scrolled }); }); });

 #middle-body { color: white; background: #555; height: 900px; } #toTop { cursor: pointer; display: block; font-size: 100px; line-height: 100px; font-weight: bold; position: fixed; top: 40%; right: 10px; text-align: center; } #toBottom { cursor: pointer; display: block; font-size: 100px; font-weight: bold; line-height: 100px; position: fixed; bottom: 20%; right: 10px; text-align: center; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); } #toTop:hover, #toBottom:hover { color: white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <div id="middle-body">test</div> <div id="toTop">^</div> <div id="toBottom">^</div> </body>

的jsfiddle

Answer 2

我会去这样的事情：

$(document).ready(function(){
    $("#toTop").on("click" ,function(){
         $("html, body").animate({ 
          scrollTop: -300
        }, 600);
    });
    $("#toBottom").on("click" ,function(){
         $("html, body").animate({ 
          scrollTop: 300 
        }, 600);
    });
});

这是更新的JSFiddle

Answer 3

您的元素不是溢出元素，而html, body是。 http://jsfiddle.net/Lpetwnre/10/

$("#toTop, #toBottom").on("click" ,function(){
    var sc = this.id==="toTop" ? "-=200" : "+=200" ;
    $("html, body").stop().animate({scrollTop: sc });
});

Answer 4

我认为，除了有关为html,body scrollTop动画的其他答案外，应该提到的是，您应该有一个用于增加和减少scrolled值的截止范围。 您不希望它超出html元素的高度（ document.documentElement.clientHeight ）。 您也不希望它低于0 。

jQuery的向上/向下滚动按钮不起作用

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-10-16 19:29:31

解决方案2
0 2014-10-16 19:28:00

解决方案3
0 2014-10-16 19:30:47

解决方案4
0 2014-10-16 19:45:02

jQuery的向上/向下滚动按钮不起作用

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-10-16 19:29:31

解决方案2 0 2014-10-16 19:28:00

解决方案3 0 2014-10-16 19:30:47

解决方案4 0 2014-10-16 19:45:02

解决方案1
1 已采纳 2014-10-16 19:29:31

解决方案2
0 2014-10-16 19:28:00

解决方案3
0 2014-10-16 19:30:47

解决方案4
0 2014-10-16 19:45:02