CODEWITHSUNDEEP
javascriptjquery
Jimmy
Jimmy

Reputation: 12487

Jquery scroll-to not scrolling

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.

This is my jsFiddle

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?

Upvotes: 0

Views: 56

Answers (3)

Mallander
Mallander

Reputation: 336

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.

Upvotes: 0

Felix
Felix

Reputation: 38102

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 4

Related Questions