Smooth Scrolling JavaScript work on all A tags

Question

I have the following JavaScript Code for smoothing scrolling:

$(document).on('click', 'a', function(event){
    event.preventDefault();

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

Now I can't use other a links on my website. When I do this: LINK nothing happened.

My website: http://www.be-virtual.org/schnittchen

Answer 1

Currently it targets all the <a> tag. Change your selector correctly to target only those start with # :

$(document).on('click', 'a[href^="#"]', function(event){
    event.preventDefault();

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