Scrolling to an anchor link with jQuery

Question

I have a link at the top my page which is linked to #here. How can I make the page scroll down to the anchor link with the #here? I've been going to Google and jQuery site, but don't know what to do. The JS code is all I've got.

HTML:

<div class="container">
    <div class="header">
       <a class="link" href="#here">Here</a>
    </div>

    <div class="footer">
       <a id="here"></a>
       <p>Some text...</p>
    </div>
</div>

JS:

$('.link').click(function() {
    $(this).scroll()
});

score 2 · Accepted Answer · answered May 13 '13 at 23:49

2

You can add:

$('.link').click(function() {
  $("html, body").animate({ scrollTop: $('#here').offset().top }, 1000);
});

answered May 13 '13 at 23:49

edonbajrami

2,196
24
34

you didn't prevent the default behavior here. – Ohgodwhy May 14 '13 at 00:07

score 0 · Answer 2 · answered May 13 '13 at 23:48

0

If you set the browser's location to the hashtag, then the browser should scroll to that location.

$('.link').click(function() {
   windows.location = $(this).attr('href');
});

answered May 13 '13 at 23:48

Reactgular

52,335
19
158
208

1

Thank you as well for your time and help. – alyus May 13 '13 at 23:57

score 0 · Answer 3 · answered May 13 '13 at 23:54

This plugin has some nice functionality and features added to it (like different animations): http://demos.flesler.com/jquery/scrollTo/

"All the matched elements will be scrolled, for example:

$('div.pane').scrollTo(...);//all divs w/class pane

If you need to scroll the window (screen), then use:

$.scrollTo(...);//the plugin will take care of this"

Scrolling to an anchor link with jQuery

3 Answers3