jQuery 使用jquery在按钮单击时上下滚动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16586594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scroll up and down a div on button click using jquery
提问by sam
I am trying to add a feature to scroll up and down a div based on button click. I was able to do the scroll down part easily, but got stuck wit the scroll up part and one more concern was a scenario, which I will explain,
我正在尝试添加一个功能来根据按钮点击上下滚动 div。我能够轻松地完成向下滚动部分，但是在向上滚动部分时卡住了，另外一个问题是场景，我将对此进行解释，
Click on "Go Down" button.
单击“向下”按钮。
and if I manually scroll down dragging down the scroll bar.
如果我手动向下滚动滚动条。
and now if I click on Go Down button again, the scroll bar will go to the previous position, as the variable assigned with the value for scrolling has an old value insteading of detecting current position of scroler.. I will add a jsfiddle link to show my work and also paste the code. What could I be doing wrong wit the scroll up option too!!
现在，如果我再次单击“向下”按钮，滚动条将转到上一个位置，因为分配给滚动值的变量具有旧值，而不是检测滚动器的当前位置。我将添加一个 jsfiddle 链接到展示我的作品并粘贴代码。我还能在向上滚动选项上做错什么！！
var scrolled=0;
$(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+300;
$(".cover").animate({
scrollTop: scrolled
});
});
$("#upClick").on("click" ,function(){
scrolled=scrolled-300;
$(".cover").animate({
scrollBottom: scrolled
});
});
$(".clearValue").on("click" ,function(){
scrolled=0;
});
});
<div class='header'><button id='upClick'>Go Up</button> <button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button> </div>
<div class='cover'><div class='rightSection'></div></div>
also is there a good plugin which has this functionality??
还有有这个功能的好插件吗？？
回答by Chamara Keragala
scrollBottomis not a method in jQuery.
scrollBottom不是 jQuery 中的方法。
UPDATED DEMO - http://jsfiddle.net/xEFq5/10/
更新的演示 - http://jsfiddle.net/xEFq5/10/
Try this:
尝试这个：
$("#upClick").on("click" ,function(){
scrolled=scrolled-300;
$(".cover").animate({
scrollTop: scrolled
});
});
回答by Sunil Singh Bora
Scrolling div on click of button.
单击按钮时滚动 div。
Html Code:-
Html 代码：-
<div id="textBody" style="height:200px; width:600px; overflow:auto;">
<!------Your content---->
</div>
JQuery code for scrolling div:-
滚动 div 的 JQuery 代码：-
$(function() {
$( "#upBtn" ).click(function(){
$('#textBody').scrollTop($('#textBody').scrollTop()-20);
});
$( "#downBtn" ).click(function(){
$('#textBody').scrollTop($('#textBody').scrollTop()+20);;
});
});
回答by pala?н
For the go up, you just need to use scrollTopinstead of scrollBottom:
对于上升，您只需要使用scrollTop而不是scrollBottom：
$("#upClick").on("click", function () {
scrolled = scrolled - 300;
$(".cover").stop().animate({
scrollTop: scrolled
});
});
Also, use the .stop()method to stopthe currently-running animation on the coverdiv. When .stop()is called on an element, the currently-running animation (if any) is immediately stopped.
此外，使用.stop()方法停止coverdiv上当前正在运行的动画。当.stop()在元素上调用时，当前正在运行的动画（如果有）会立即停止。
回答by Jai
Where did it come from scrollBottomthis is not a valid property it should be scrollTopand this can be positive(+) or negative(-) values to scroll down(+) and up(-), so you can change:
它从哪里来scrollBottom这不是一个有效的属性，它应该是scrollTop，这可以是正（+）或负（-）值向下滚动（+）和向上（-），所以你可以改变：
scrollBottom
to this scrollTop:
对此scrollTop：
$("#upClick").on("click", function () {
scrolled = scrolled - 300;
$(".cover").animate({
scrollTop: scrolled
});//^^^^^^^^------------------------------this one
});
回答by billyonecan
To solve your other problem, where you need to set scrolledif the user scrolls manually, you'd have to attach a handler to the window scroll event. Generally this is a bad idea as the handler will fire a lot, a common technique is to set a timeout, like so:
要解决您需要设置scrolled用户是否手动滚动的其他问题，您必须将处理程序附加到窗口滚动事件。通常这是一个坏主意，因为处理程序会触发很多，一个常用的技术是设置超时，如下所示：
var timer = 0;
$(window).scroll(function() {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
scrolled = $(window).scrollTop();
}, 250);
});
回答by user122293
You can use this simple plugin to add scrollUpand scrollDownto your jQuery
您可以使用这个简单的插件来添加scrollUp和添加scrollDown到您的 jQuery
回答by Jake Flynn
Just to add to other comments - it would be worth while to disable scrolling up whilst at the top of the page. If the user accidentally scrolls up whilst already at the top they would have to scroll down twice to start
只是为了添加其他评论 - 在页面顶部禁用向上滚动是值得的。如果用户在已经在顶部时不小心向上滚动，他们将不得不向下滚动两次才能开始
if(scrolled != 0){
$("#upClick").on("click" ,function(){
scrolled=scrolled-300;
$(".cover").animate({
scrollTop: scrolled
});
});
}
