back-to-top.liquid

{% comment %}
  Created by Hardik Davra,
  1) Company: https://candisofttech.com
  2) Shopify Blogging: https://tataglia.com/category/shopify/
{% endcomment %}

<style type="text/css">
  /*   css style for back to top button */
  .back-to-top-button {
    position: fixed;
    right: 4%; /* You can change right side position by increasing or decreasing this number */
    bottom: 4%; /* You can change bottom side position by increasing or decreasing this number */
    padding: 10px;
    border-radius: 50%;
    background-color: #000000; /* You can change Background color by modifying hex code or rgb code. Checkout this link for more ideas https://htmlcolorcodes.com/ */
    display: flex;
  }
  
  /* css style for up arrow inside the button */
  .back-to-top-button svg {
    width: 20px; /* You can change width of the icon by increasing or decreasing this number */
    height: 20px; /* You can change height of the icon by increasing or decreasing this number */
    fill: #ffffff; /* You can change Color of the icon by modifying hex code or rgb code. Checkout this link for more ideas https://htmlcolorcodes.com/ */
  }
</style>

<a href="javascript:void(0);" class="back-to-top-button" id="back-to-top-button">
  <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 487 487" xml:space="preserve">
	<g>
	  <path d="M397.7,376.1c20.4,20.4,53.6,20.4,74,0s20.4-53.6,0-74L280.5,110.9c-20.4-20.4-53.6-20.4-74,0L15.3,302.1 c-20.4,20.4-20.4,53.6,0,74s53.6,20.4,74,0l154.2-154.2L397.7,376.1z"/>
	</g>
  </svg>
</a>

<script type="text/javascript">

  const smoothScrollingIsSupported = 'scrollBehavior' in document.documentElement.style;
  const scrollOptions = {
    behavior: 'smooth',
    left: 0,
    top: 0,
  };
  
  function getScrollTop() {
    return (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
  }
  
  function scrollToTop(e, duration = 1500) {
    const start = window.performance.now();
    const scrollTop = getScrollTop();
  
    if (scrollTop === 0) return;
  
    // For modern browsers
    if (smoothScrollingIsSupported) {
      window.scrollTo(scrollOptions);
    }
  
    // Mainly for IE & Safari

    if (!smoothScrollingIsSupported) {
      const step = (timestamp) => {
        const elapsed = timestamp - start;
        const t = Math.min(elapsed / duration, 1);
        const ease = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  
        if (t < 1) {
          window.scrollTo(scrollOptions.left, scrollTop * (1 - ease + scrollOptions.top * ease));
          window.requestAnimationFrame(step);
        }
      };
  
      window.requestAnimationFrame(step);
    }
  }
  
  document.querySelector('#back-to-top-button').addEventListener('click', scrollToTop, null);
</script>