jQuery 自动滚动滚动条答案

【问题标题】：jQuery Automatically Scroll the ScrollbarjQuery 自动滚动滚动条
【发布时间】：2014-11-07 12:02:34
【问题描述】：

有什么方法可以让我使用 jQuery 在任何 HTML 元素上触发滚动条的向下滚动和向上滚动？

我的页面上有一些 div，我想使用 jQuery 向下/向上滚动其中一个滚动条。

【问题讨论】：

您可以更改 scrollTop 属性，这就是滚动所做的。
看看stackoverflow.com/questions/18831970/…

标签： javascript jquery html scrollbar

【解决方案1】：

如果我猜对了，那么也许你想在 div 内滚动。

这是一个例子：

http://jsfiddle.net/fxj4jonx/1/

基本代码：

$("#your_div_to_scroll_into").animate({scrollTop:[scroll amount]},[scroll time]);

$("#sDiv1").click(function(){
$("#div1").animate({ scrollTop: 1000 }, 3000);
});


$("#sDiv2").click(function(){
$("#div2").animate({ scrollTop: 500 }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="Scroll Div1" id="sDiv1"/>
<input type="button" value="Scroll Div2" id="sDiv2"/>
<br/>
<hr/>

Div 1
<div id='div1' style='height:100px; overflow:scroll; width:200px;align:left;'>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
<br/>
<hr/>

Div 2
<div id='div2' style='height:100px; overflow:scroll; width:200px; align:left;'>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>

【讨论】：

【解决方案2】：

我认为这是你想要的：

$("#button").click(function (){$('html, body').animate({scrollTop: $("#ScrolltothisID").offset().top}, 500 <-- time in MS);});

如果你点击一个id为#button的元素，它会向下滚动到#ScrolltothisID

【讨论】：

【解决方案3】：

检查 JSFiddle :- JSFiddle

$(document).on('click','.searchByDiv', function(event) {
var targetDiv = "#" + this.getAttribute('data-target');
$('html, body').animate({
    scrollTop: $(targetDiv).offset().top
}, 1000);
});

【讨论】：