Scroll jquery function

Question

I want to scroll smoothly when I click the navbar, so they have an href of #blahblah for where to go.

My current code, which won't work, is as follows:

$(".menu").click(function() {
    var href = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(href).offset().top
    }, 2000);
});

What happens that doesnt work? – tymeJV Jun 24 '14 at 19:29 — tymeJV, Jun 24 '14 at 19:29

score 0 · Answer 1 · answered Jun 24 '14 at 19:31

0

I think you want this, so you're selecting an ID:

scrollTop: $('#' + href).offset().top

answered Jun 24 '14 at 19:31

isherwood

58,414
16
114
157

score 0 · Answer 2 · answered Jun 24 '14 at 19:32

0

Pass correct string thats it

$(".menu").click(function() {
var href = $(this).attr('href');
$('html, body').animate({
    scrollTop: $("#"+href).offset().top
}, 2000);
});

answered Jun 24 '14 at 19:32

Trishul

998
1
7
17

score 0 · Answer 3 · edited May 23 '17 at 12:20

This shows my answer: http://jsfiddle.net/ZjQLy/

html:

<div id="click" href="#tar">click me</div>
<div id="space"></div>
<div id="tar">whats up</div>

javascript:

$("div#click").on("click", function () {
  $("html, body").animate({
      scrollTop: $($("div#click").attr("href")).offset().top
  }, 2000);
});

Additionally, here is another stack overflow question that has an answer: JQuery smooth scrolling to one element when clicking a corresponding element

Scroll jquery function

3 Answers3