Jquery scrollTop() with offset?

Question

I am using jquery scrollTop(), and I have some issues

This is HTML

<a class="jumper" href="#first">Jump</a>

<div class="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>

And Jquery

  $(document).ready(function () {

        $('.jumper').click(function () {

            $('html, body').animate({
                scrollTop: $("#fourth").offset().top
            }, 2000);

        });


    });

It is working OK, but what i need, is not to scroll element #third to top of page, just to scroll it little under about few px smaller like 100px, because i want to leave something in previous element to be seen to, is that possible?

Here is working fiddle

http://jsfiddle.net/X9FUg/4/

I want to leave yellow element to be seen abaout 100px?

Answer 1

Note that there may be better solutions... but the first thing that spings to mind is just subtracting 100.

$("#fourth").offset().top - 100

offset().top returns a number without the 'px' part, so doing offset().top - 100 should work just fine. (https://api.jquery.com/offset/)