CODEWITHSUNDEEP
javascriptjqueryhtml
supersize
supersize

Reputation: 14773

scrollTop to active element in a overflow scroll div

I have a specific question about .scrollTop. I have a div with a specific height and a lot of p tags inside:

<div id="scroll">
   <p>name1</p>
   <p>name2</p>
   <!-- till name50 -->
</div>

depending on the name you click it gets a class .active. What I then want to do is scroll the div so, that the name is at the top. So what I get is that I can use scrollTop in an animate function like this:

$('#scroll').animate({scrollTop: value });

but how can I get the var value. I tried it with

var value = $('#scroll p').hasClass('active').position().top;

But somehow it does not work.

Some help is much appreciated.

Upvotes: 3

Views: 6690

Answers (1)

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

You need to check scrollTop() for the container #scroll and add that back to the position() arg. 

var $scroll = $('#scroll');

$('p').click(function(e){
    var $this = $(this);
    $scroll.animate({
        "scrollTop": $this.position().top + $scroll.scrollTop()
    }, 1000);
});

http://jsfiddle.net/yCEap/1/

To just get the value:

var value = $('#scroll').scrollTop();

Upvotes: 5

Related Questions