Smooth Scrolling with jQuery


Categories
Tags

Create a smooth scrolling effect to an anchor tag on the same page. You can pass a parameter to this so it’s reusable, and the link has graceful degradation for anyone who’s disabled JavaScript.


Demo

Smooth scrolling is a lovely effect to take users to certain areas of content on your page. To test this functionality out try clicking this link. It should scroll you down to the comments.

Try clicking this link to see what would happen if JavaScript is disabled. On this occasion a simple anchor link is used.


Include jQuery

Remember to include jQuery first. You can either download jQuery and include it in your files, or include it using a CDN. Just add this line inside your head element to include jQuery via the Google CDN:

wp_enqueue_script('jquery-3-2-1-min', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');

Create the Function

You’ll need to create and JavaScript file so you can add the code below to it. For reusable functions like this I like to create a file called general.js, which I include in the head element of my page. Add the code below to your JavaScript file:

// Scroll to anchor (passed parameter)
function scrollTo(anchor){
    $(‘html,body’).animate({ scrollTop: $(anchor).offset().top }, 1000);
}

Calling the Function

Call the function above by passing an anchor tag as a parameter (e.g the div class/id you want to link to). In this example we’re linking to a div with the id #comments-anchor:

<a href="#comments-anchor" onclick="scrollToAnchor('#comments-anchor');return false;">Go to the comments</a>
  • The href value is the fallback, just in case JavaScript is disabled
  • Onclick runs the function and passes the parameter
  • Return false stops the link from jumping to the top of the page before scrolling

How easy is that!

Comments

We welcome comments! Please read the disclaimer.

Disclaimer and Legal Information

The use of any content found on or via this website (code, how to guides etc.) is done so at your own risk. We take no responsibility for any issues encountered.

This blog and its authors will not be held responsible for any misuse, reuse, recycled and cited/uncited copies of content from this website by others.

The views and opinions expressed in this blog are those of the authors and do not necessarily reflect the position or opinion of any other agency, organisation, employer or company.

Comments are moderated but we do not take any responsibility for any libel or litigation that results from something written in a comment. We reserve the right to reject or delete any comment for any reason whatsoever (abusive, profane, rude etc). Please keep your comments polite and relevant.

We are happy for you to quote and share our content in any reasonable manner, e.g. post links to our blogs on social media, but not in any way that suggests that we, or our authors, endorse you, your use or your views.

We appreciate attributions, e.g. a link to our website (www.dragoncode.co.uk).