Question

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

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

Answer 1

我认为这是你想要的：

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

如果您点击ID为#button的元素，它将向下滚动到#ScrolltothisID

Answer 2

如果我把它弄好了，那么也许你想在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>

Answer 3

检查JSFiddle： - JSFiddle

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

jQuery自动滚动滚动条

3 个答案: