How to Add A ‘Smooth Scroll’ Effect On Shopify

By Cesar Beltran
HOW TO ADD A ‘SMOOTH SCROLL’ EFFECT ON SHOPIFY created by the best Shopify experts

Ever need to have a button or a link with a smooth, automatic scroll-down to another place on the page?

You may know that you can use a bookmark ‘anchor link’ to jump down, but sometimes this isn’t very smooth if it’s a quick movement, and can be confusing for your customers.

So here’s a quick little tutorial on how to add a smooth scroll-down to a page on your Shopify store.

Click here to see an example: shortcodesforshopify.myshopify.com/pages/smooth-scroll-down-example

Step 1: Write your content. For example, you might have a heading, some paragraphs, and then a link or button from which you want to scroll down smoothly. Set all of that up first.

Step 2: Next, find the link you want to scroll FROM. For example, it could be an image or a link. Add an anchor tag to it, but instead of linking to another page, use the hashtag to scroll to an anchor on the same page. Like this:

<a href="#scroll-here">CLICK THIS LINK TO SCROLL</a>

Step 3: Find the place you want to scroll TO. This could be a new section for example. When I click the button or link you created in step 1, I should scroll here. Flip to HTML mode again, and add an anchor with the ‘name’ attribute, like this:

<a name="scroll-here">HERE IS WHERE WE WILL SCROLL TO</a>

Step 4: Lastly, still in HTML view, add this code to the very BOTTOM of your page:

<script>// <![CDATA[
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
// ]]></script>

Note: This code is borrowed from CSS Tricks’ tutorial’s comments by Devin, as seen here: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Then save. Now that this is set up, any anchor links on the same page will have a smooth scroll.

Click here to see an example: shortcodesforshopify.myshopify.com/pages/smooth-scroll-down-example

Have questions or another cool trick you’d like to share? Drop them in the comments!

Thank you again for keeping up to date with our Shopify Insider Blog @ Blackbelt Commerce. Please make sure to check out our products. We also have some top blog recommendations for you to check out; How To Link Comments In Shopify Blog Posts,  How To Back Up Your Shopify Store and Shortcodes For Shopify. As always, keep a lookout for new blog posts.

What are the top Shopify stores doing?

Take what we've learned and use it to your advantage.
Get our exclusive research: Insights from over 500 Shopify Stores.

Powered by ConvertKit
Tell others about this post

Comments 15

  1. Hey

    This works perfect, but is it possible to set this up over a multi page site? It only works on one page, and clicking any of these links in the navigation from a different page on the website does nothing!

    1. Hi Sam! Thanks for reading. Unfortunately this one is a bit more complex than what we can do here, but if you’d like some help feel free to contact us and we may be able to help as a mini-project 🙂 Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  2. Hi, great tutorial. It works really well and makes my single page site much better.
    One thing though, I’m using the Brooklyn theme which has a left menu bar on mobile (as opposed to your top mobile menu). From a usability perspective, it would be good to have the menu close before the scroll happens. Otherwise, you don’t see any of the scroll animation and the menu is still over the top. Does this require an extra line in the Javascript? Any ideas?

    1. Hi Chris! Thanks for your reading, sounds like it’s mostly working well. Unfortunately this one is a bit more complex than what we can do here, but if you’d like some help feel free to contact us and we may be able to help as a mini-project 🙂 Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  3. For Multi Sites add to header before head of theme liquid.

    $(function() { $(‘a[href*=#]:not([href=#])’).click(function() { if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’); if (target.length) { $(‘html,body’).animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

  4. Hi Tristan,
    Thank you for the tutorial which was extremely helpful. However I have been unable to get the anchor positioning accurate. Eg. If you click on one of the last 2 questions on my FAQ it will take you to the first answer not the last 2. Please will you take a look and let me know where I am going wrong.

Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.