Jquery scroll-to not scrolling

Question

I'm trying to have it so when the user clicks a link it scrolls down so that the blue area is off the top of the page.

I think the code would be something like this:

$("#scroll").click(function() {
    $('html, body').animate({
        scrollTop: $("#jumbo").offset().bottom
    }, 2000);
});

However it doesn't seem to work. Can anyone tell me where I have gone wrong please?

Doesn't offset() only return top and left for positioning purposes? — Andy
– Andy, Commented May 9, 2014 at 9:25

Rory McCrossan · Accepted Answer · 2014-05-09 09:27:00Z

4

offset() only exposes the top and left properties. To get the bottom you need to add the height to top:

$('html, body').animate({
    scrollTop: $(".jumbo").offset().top + $(".jumbo").height()
}, 2000);

Updated fiddle

Also, note that in your example jumbo is a class, not an id.

answered May 9, 2014 at 9:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Felix · Accepted Answer · 2014-05-09 09:27:23Z

0

I think you're looking for scrolling to the first .midheight div:

$("#scroll").click(function() {
    $('html, body').animate({
        scrollTop: $(".midheight:eq(0)").offset().top
    }, 2000);
});

Updated Fiddle

answered May 9, 2014 at 9:27

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Mallander · Accepted Answer · 2014-05-09 09:30:02Z

You don't need to use jQuery for this, you can simply use anchors.

Anchors are links but with hashes, for example:

<a name="scroll_down"></a>

These can then be targeted with a normal link, but set out like this:

<a href="#scroll_down"></a>

Clicking the link will scroll you down the page to where the anchor is put in your HTML.

For the slow animation that you're after, you can look here and use his code. All credit to him for the code, works great.

Here is your updated fiddle

The good thing about this, is you can easily use to it have links to each of the "features" you had in the fiddle and have an anchor above each so the user can scroll down to the appropriate are easily, and without the need for you to have repeating jQuery code.

Collectives™ on Stack Overflow

Jquery scroll-to not scrolling

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related