jQuery的向上/向下滚动按钮不起作用
[英]jquery scroll up/down buttons not working
问题描述
I am trying to make scroll up and down buttons on my site, but i must be missing something. 
我试图在我的网站上进行上下滚动按钮，但我一定缺少一些东西。 here is my code... 这是我的代码...
html: HTML：
<body>
<div id="middle-body">test</div>
<div id="toTop">^</div>
<div id="toBottom">^</div>
</body>
js/jquery: 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: 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 个解决方案
解决方案1
1 已采纳 2014-10-16 19:29:31
middle-bodydoesn't have anything to scroll, it's not restricted.middle-body没有任何可滚动的内容，不受限制。 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.scrollTop是元素内容顶部从视口顶部开始的像素数。 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>
解决方案2
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 这是更新的JSFiddle
解决方案3
0 2014-10-16 19:30:47
Your element is not an overflow element, while html, body is. 您的元素不是溢出元素，而html, body是。 http://jsfiddle.net/Lpetwnre/10/ http://jsfiddle.net/Lpetwnre/10/
$("#toTop, #toBottom").on("click" ,function(){
var sc = this.id==="toTop" ? "-=200" : "+=200" ;
$("html, body").stop().animate({scrollTop: sc });
});
解决方案4
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. 我认为，除了有关为html,body scrollTop动画的其他答案外，应该提到的是，您应该有一个用于增加和减少scrolled值的截止范围。 You don't want it to go beyond the height of your html element ( document.documentElement.clientHeight ). 您不希望它超出html元素的高度（ document.documentElement.clientHeight ）。 You also don't want it to go below 0 . 您也不希望它低于0 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.