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?

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

Terry Seidler
– Terry Seidler

2014-04-15 06:40:40 +00:00
Commented Apr 15, 2014 at 6:40 — Terry Seidler
– Terry Seidler, Commented Apr 15, 2014 at 6:40

Terry Seidler · Accepted Answer · 2014-04-15 06:44:38Z

14

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/)

answered Apr 15, 2014 at 6:44

Terry Seidler

2,04316 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3497034 · Accepted Answer · 2014-04-15 06:43:44Z

3

Yes, Try with below solution and it will work for you. Here instead of 100 you can set whatever value you want.

    $(document).ready(function () {
        $('.jumper').click(function () {
            $('html, body').animate({
              scrollTop: $("#fourth").offset().top - 100
            }, 2000);
        });
    });

answered Apr 15, 2014 at 6:43

user3497034

Collectives™ on Stack Overflow

Jquery scrollTop() with offset?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related