How to Add A ‘Smooth Scroll’ Effect On Shopify

Adding a Smooth Scroll Effect to your Shopify store is easy, and it doesn’t require an expensive app. Just copy and paste a bit of code and you’re all set! Edit the code for a theme if you know HTML and CSS, and have a basic understanding of Liquid. The basic smooth scroll with anchors would work like shown below:

 View The Live Demo => Click the order now to see the features.

Steps 1: Html Class and ID

 <a class="smooth-scroll " href="#requiredsectionID "> 


Steps 2 : Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.smooth-scroll').on('click', function(evt) {
evt.preventDefault();
$('html, body').animate(
{ scrollTop: $($(this).attr('href')).offset().top},
1000
);
});
});
</script>

 

And that’s it!

If you have any trouble, feel free to leave a comment below and I’ll do my best to help.

Need Shopify Expert Help?

If you need any Shopify expert help, you can try on Shopi Tasker . Shopi Tasker is a certified Shopify expert agency. They have been focused on delivering small & big tasks to Shopify users and have helped over 100+ Shopify store owners get stuff done.

out of sandbox theme
pixel union shopify theme
themeforest free shopify theme
bold shopify apps

Leave a comment