How to Add Smooth Scrolling to Your Website

3 Development 3 Comments

If you’ve built a one page website or a Pinterest-style infinite-scrolling site, you’ve no doubt realized the need for a way to smooth scroll up and down a lengthy page. There are plugins that will handle this, but there’s no need. Here’s the quick and easy for how to add smooth scrolling to your website.

Customarily, we’d target where we want the browser to go by prepending an element tag in the anchor tag like this:

<a href="#services">Jump to services</a>
<div id="services">

The problem with that is it makes the user feel like they experienced a time-warp, with the screen suddenly flashing a brand-new area. That can be jarring and unpleasant.

The solution is to include the following the $(document).ready inside your jQuery file, and then all the links/hrefs that have a hash tag(#) at the beginning will be scrolled to smoothly. It’s a much better user experience.

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    var target = this.hash;
        $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;

I recently used this on a Bootstrap-based theme I made to give away(for free!)

  1. Pratik - February 4, 2014

    Thanks for this post. Really it has saved my a lot time.

  2. Hi, do you think is possible to make the same in wordpress?..i have create the one page in wordpress but i don’t know ho to make smooth scrolling menu without plugin…thank you

Leave a Comment