How to add padding to scrollTop() function

jquery jquery-animate scrolltop
1110 picture 1110 · Jan 9, 2013 · Viewed 18.9k times · Source

I have a parent div with a list of div's.
In parrent div I also added fixed positioned div on the top of parent div.
Based on some action I call:

$('#parent').animate({       
                    scrollTop: $("#" + itemId).offset().top  - $('#parent').offset().top + $('#parent').scrollTop()
                     }, 500);

This successfully scroll to a div and put it on the top.
The issue is that when searched div is on the top I can't see it because it is bellow fixed div.

<div id="parent">
<div id="fixedDiv" style="position: fixed;
z-index: 999;
background: #000;
width: 300px;">
... some elements ...
</div>
<ul>
... list of divs...
</div>

Is there some solution to scroll to div padded from the top of parent?

Answer

kaleazy picture kaleazy · Jul 4, 2013

This is what I use, for a smooth scroll with 10px of upper padding:

$('body').animate({scrollTop: $('#div').offset().top-10},1000);

Related questions

jQuery .scrollTop(); + animation

I set the page to scroll to top when a button is clicked. But first I used an if statement to see if the top of the page was not set to 0. Then if it's not 0 I animate the page …

Read More
Accounting for a fixed header with animate.scrolltop and (target).offset().top;

This should be a pretty basic question, but i've thrown most of my morning at it, and at this point I'm close to throwing in the towel. I have not even a little bit of js foo -- but I …

Read More
Animate jQuery scrolltop

I have a scrollTop function in jQuery but I can't animate it. Is it possible? $(".loadmore").click(function() { $(this).toggleClass("up-arrow", 1000); $(window).scrollTop($('.docs').offset().top, 2000); });

Read More