Smooth Scrolling

I hate anchor tags, and I hate even more that there isn’t an easy point / click way for them to be added into a website using the WordPress editor.

Nonetheless, clients request them a lot, and they don’t like the “jumping” that they cause when the anchor links are on the same page.

Copy and paste this function into your theme’s jQuery file, and it will activate smooth transitions for all anchor tags via the name attribute upon click.

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);
    return false;
});

Source.

Additional Example:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Source.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.