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.