jquery scroll up/down buttons not working
Question
I am trying to make scroll up and down buttons on my site, but i must be missing something. here is my code...
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;
}
and last but not least the fiddle! im still learning all this so im pretty green, any help?
4 answers
solution1
1 ACCPTED 2014-10-16 19:29:31
middle-bodydoesn't have anything to scroll, it's not restricted. You might be trying to scroll the body of your document.scrollTopis the number of pixels the top of the element's content is from the top of it's viewport. So when you want to go down the page, you add to it, not subtract:
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>
solution2
0 2014-10-16 19:28:00
I would go for something like this:
$(document).ready(function(){
$("#toTop").on("click" ,function(){
$("html, body").animate({
scrollTop: -300
}, 600);
});
$("#toBottom").on("click" ,function(){
$("html, body").animate({
scrollTop: 300
}, 600);
});
});
Here is an updated JSFiddle
solution3
0 2014-10-16 19:30:47
Your element is not an overflow element, while html, body is. http://jsfiddle.net/Lpetwnre/10/
$("#toTop, #toBottom").on("click" ,function(){
var sc = this.id==="toTop" ? "-=200" : "+=200" ;
$("html, body").stop().animate({scrollTop: sc });
});
solution4
0 2014-10-16 19:45:02
I think, in addition to the other answers about animating scrollTop for html,body , it should be mentioned that you should have a cutoff range for incrementing and decrementing the scrolled value. You don't want it to go beyond the height of your html element ( document.documentElement.clientHeight ). You also don't want it to go below 0 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.