How to scroll to an element when a link is clicked

Question

So I have the following website: http://www.gameplay-universe.uphero.com/

You can see the "Skip to Content" link. I want when it's clicked the page to scroll to div#content. I am using the latest version of jQuery. How can I achieve this?

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element - search my man — tymeJV, Mar 21 '14 at 20:05

score 1 · Answer 1 · answered Mar 21 '14 at 20:12

1

$("li a").click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 1000);
    return false;
});

this gonna work for all links inside li elements.

answered Mar 21 '14 at 20:12

ProllyGeek

14,423
5
44
69

Since I'm new to jQuery, which variables should I edit to make it scroll to `div#content onclick li.skip a`? – PowerUser Mar 21 '14 at 20:16
$("#skip a").click(function(){ $('html, body').animate({ scrollTop: $("#content").offset().top }, 1000); return false; }); – ProllyGeek Mar 21 '14 at 20:19

score 1 · Accepted Answer · answered Mar 21 '14 at 22:26

OK here's the solution I've found:

$(document).ready(function() {

// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {

    // The id of the section we want to go to.
    var id = $(this).attr("href");

    // An offset to push the content down from the top.
    var offset = 60;

    // Our scroll target : the top position of the
    // section that has the id referenced by our href.
    var target = $(id).offset().top - offset;

    // The magic...smooth scrollin' goodness.
    $('html, body').animate({scrollTop:target}, 500);

    //prevent the page from jumping down to our section.
    event.preventDefault();
});
});

That worked for me.

score 0 · Answer 3 · answered Mar 21 '14 at 20:09

0

$(document).scrollTop($('div#content').offset().top)

answered Mar 21 '14 at 20:09

lyoung

427
2
11

score 0 · Answer 4 · answered Mar 21 '14 at 20:12

0

Here is a script I like to use whenever I want to enable a "scroll to" type of Jquery effect.

http://cferdinandi.github.io/smooth-scroll/

answered Mar 21 '14 at 20:12

Ty T.

566
4
16

How to scroll to an element when a link is clicked

4 Answers4