What's the best way to scroll a div with overflow:auto by a certain pixels or certain percentage when clicking an anchor? The HTML is very simple:

<style>
#container{
height:250px;
overflow:auto;
</style>

<div id="container">
<p>Lots of Content</p>
</div>

<a href="#" id="scrolldiv">Scroll Down</a>

When I click the anchor above, I want to scroll that div above a certain amount of pixes, say 30px. I'm hoping jQuery has something built in that makes this simple.

What's the best way to scroll a div with overflow:auto by a certain pixels or certain percentage when clicking an anchor? The HTML is very simple:

<style>
#container{
height:250px;
overflow:auto;
</style>

<div id="container">
<p>Lots of Content</p>
</div>

<a href="#" id="scrolldiv">Scroll Down</a>

When I click the anchor above, I want to scroll that div above a certain amount of pixes, say 30px. I'm hoping jQuery has something built in that makes this simple.

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 23, 2012 at 14:55 Joel EckrothJoel Eckroth 2,53433 gold badges2020 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

$('#scrolldiv').click(function(e){
    var current = $('#container').scrollTop();
    $('#container').scrollTop(current + 30);
    e.preventDefault();
});​

jsFiddle

For that purpose I would use jQuery's animate:

$('#scrolldiv').click(function(){
    $('#container').animate({scrollTop: '+=30'});
});

I belive it's got the shortest syntax for this and it looks nice.

jsFiddle example