1

Is there any way that I can trigger scroll down and scroll up of a scroll bar at any HTML element with jQuery?

There are some divs at my page and I want to scroll down/up one of thems scrollbar with jQuery.

kamaci
  • 72,915
  • 69
  • 228
  • 366
  • You can change the `scrollTop` property, which is what scrolling does. – George Nov 07 '14 at 12:05
  • Have a look at http://stackoverflow.com/questions/18831970/jquery-smooth-scroll-to-div-using-id-value-from-link – KiV Nov 07 '14 at 12:07

3 Answers3

0

I think this is want you want:

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

If you click on a element with the id #button it will scroll down to #ScrolltothisID

Stefan
  • 1,905
  • 7
  • 24
  • 38
0

If I got it right then maybe you want to scroll inside the divs.

Here's the example :

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

The basic code :

$("#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>
Himanshu Tyagi
  • 5,201
  • 1
  • 23
  • 43
0

Check the JSFiddle :- JSFiddle

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