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;
}

最后但并非最不重要fiddle! 我还在学习这一切，所以我很绿，有什么帮助吗？

Answer 1

middle-body没有任何可滚动的内容，但不受限制。您可能正在尝试滚动文档正文。
scrollTop是元素顶部的内容来自其顶部视口的像素数。因此，当您想要沿着页面向下移动时，您可以添加它，而不是减去：

＆＃13;

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
        });
    });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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);
    });
});

这是updated 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

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

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

4 个答案: