jquery向上/向下滾動按鈕不起作用

我想讓我的網站上的滾動向上和向下按鈕，但我必須缺少的東西。這裏是我的代碼...jquery向上/向下滾動按鈕不起作用

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! IM仍然至少學習所有這些都非常綠色，有幫助嗎？

來源

2014-10-16 TEN Design

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

來源

2014-10-16 19:29:31 George

我會去這樣的事情：

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

來源

2014-10-16 19:28:00 Tim

你的元素不是一個溢出元素，而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 }); 
});

來源

2014-10-16 19:30:47

我認爲，除了關於動畫scrollTop爲html,body其他的答案，應該提到的是，你應該有遞增和遞減的scrolled值截止區域。你不希望它超出你的html元素的高度（document.documentElement.clientHeight）。你也不希望它低於0。

來源

2014-10-16 19:45:02

jquery向上/向下滾動按鈕不起作用

回答

相關問題