Javascript function stops other function working

Question

This is my code: http://jsfiddle.net/KCb5z/

The problem bit of code is here I think:

$(".nav").click(function (e) {
    e.preventDefault();
    var divId = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(divId).offset().top;
    }, 500);}
});

I think I have done something wrong with my bracketing because it doesn't seem to scroll correctly or even allow the persistent header to remain persistent. Can anyone show me where I went wrong please?

You have 2 `{` and 3 `}` in that bit of code. It shouldn't be too hard to figure out which `}` to remove. In fact you have 2 correct choices. — Paul, May 12 '14 at 08:35
When I remove the first or second bracket here ```}, 500);}``` it still doesnt work! I don't understand what lint is trying to tell me — J.Zil, May 12 '14 at 08:41

score 1 · Accepted Answer · answered May 12 '14 at 08:47

You can see the error from the browser console:

Uncaught SyntaxError: Unexpected token ;

The reason is because of ; after you've set the scrollTop value, you just need to remove it and it should work:

scrollTop: $(divId).offset().top;
// ---                          ^ remove this

Updated Fiddle

score 1 · Answer 2 · answered May 12 '14 at 08:49

1

Apart from the spurious semicolon after .top

$('html, body').animate({scrollTop: $(divId).offset().top}, 500);

you might want to wrap the whole content thing in a div with a height and use overflow:auto to keep the menu

http://jsfiddle.net/mplungjan/7cZG7/

Also change the fiddle to head instead of onload

answered May 12 '14 at 08:49

mplungjan

169,008
28
173
236

Thank you for the help. May I ask about your suggestion of keeping the content in a div using overflow: auto, what is the advantage of that? – J.Zil May 12 '14 at 08:59
Look in the fiddle. It will keep the menu in place – mplungjan May 12 '14 at 09:07

Javascript function stops other function working

2 Answers2