<!-- wp:image {"align":"center","id":188,"width":768,"height":402,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.mojoin.com/wp-content/uploads/2020/11/back-to-top-in-shopify-theme-1024x536.jpg" alt="back to top in shopify store" class="wp-image-188" width="768" height="402"/><figcaption>back to top in Shopify store theme</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>For a Shopify store with more than 50 products, you always want to put as many products and product promotion information as on the home page or give more product detail information on the product page. But when clients are viewing your page scroll down and down ...., they will find it is a little bit noisy if they are going to return to the top again, normally clients need to scroll up and up again. it is wasting user's time and not convenient for the clients. So definitely it is not friendly for your clients.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If we can add a floating button somewhere on the page, for example at the right bottom corner or at the middle of the screen right edge, whenever clients want to return to the top, they just need to click or tap the button. It will be very convenient for your clients.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Today I will show you how to add this feature into your Shopify theme step by step.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong><a href="#scroll-top-injs" title="#scroll-top-injs">Scroll to the top in JavaScript</a></strong></li><li><strong>Floating button position adjustable</strong></li><li><strong>When the floating button should be appear</strong></li><li><strong>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</strong></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 id="scroll-top-injs">Scroll to the top implementation in JavaScript</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here we will use <a href="https://en.wikipedia.org/wiki/JQuery" title="About JQuery library">jQuery </a>free JavaScript library,its <a href="https://api.jquery.com/scrolltop/" title="jquery scrollTop function">scrollTop()</a>, <a href="https://api.jquery.com/fadeIn/">fadeIn()</a>, <a href="https://api.jquery.com/fadeOut/">fadeOut()</a> and <a href="https://api.jquery.com/animate/">animate()</a> functions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we can use animate() to implement scroll to the top :</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>$('html, body').animate( { scrollTop: 0 }, 300);</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;script>
window.onload = function() {
 jQuery(function($) {
   var offset = 300;
   var duration = 500;
   $(window).scroll(function() {
     if ($(this).scrollTop() > offset) {
       $('.back-to-top').fadeIn(duration);
     } 
     else {
       $('.back-to-top').fadeOut(duration);
     }
   });
   $('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
     e.preventDefault();
     $('html, body').animate( { scrollTop: 0 }, duration);
     return false;
   })
 });
}
&lt;/script>
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p><strong>Line 1</strong>: make our code called when the whole page has been loaded. including all dependent resources such as CSS files and images.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 4-5</strong>: Define two constants for when the floating button will appear or disappear and fadeIn/fadeOut duration.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 6-12</strong> : Control to show or hide the floating button.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 14-18 </strong>: Scroll to the TOP of the current page.</p>
<!-- /wp:paragraph -->