{% comment %}
  Renders a button scroll to top at every pages

  Usage:
  {% render 'scroll-top %}
{% endcomment %}

<a xo-scroll-to href='#top' id='xo-scroll-top' class='scroll-top'>
  <div class='scroll-top__icon-before'>
    {% render 'icon', name: 'chevron-up' %}
  </div>
  <div class='scroll-top__icon-after'>
    {% render 'icon', name: 'chevron-up' %}
  </div>
</a>

<script>
  const scrollTopEl = document.querySelector('#xo-scroll-top');
  window.addEventListener('scroll', function () {
    let scrollPosition = window.scrollY;
    if (scrollPosition >= 700) {
      scrollTopEl?.classList.add('xo-active');
    } else {
      scrollTopEl?.classList.remove('xo-active');
    }
  });
</script>
