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, an overview of e-commerce regulations, how much does it cost to hire a shopify expert?, and Shortcodes For Shopify. As always, keep a lookout for new blog posts.
Hi Tristan,
Thanks for your tutorial! I’m so close to it being perfect…I just can’t get the page to scroll down smoothly. It just jumps to the correct place. I would love for it scroll…
Here is the page… https://www.masteringthemix.com/pages/mixing-with-levels
Any tips?
Thanks,
Tom.
Hi Tom! Seems to be working nicely on my end, it scrolls down in a nice way… is that not happening for you? 🙂
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!
Hi David! Thanks for reading, glad it’s working well on your site 🙂 As for setting it up over a multi-page site — that’s something we might need to take a deeper look at in a custom mini-project, as it really depends on your site 🙂 Feel free to contact us at the link below and happy to see if we can help > https://www.blackbeltcommerce.com/contact/
Hey,
I’ve tried adding the script into theme.liquid and index.liquid (which is the page the button is on)….this no luck with the smoothness…
Cheers
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.
Hey Sam – did you find a solution to this? I’m running into the same issue.
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?
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.
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; } } }); });
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.
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
This doesn’t appear to work with navigation links. Is it because they have class=”mobile-nav__link” associated with them?
Thanks!
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
Hi It’s working but instead of smooth scrolling, it’s jumping to the location.