Solved

How To Add Back To Top Button On Shopify Online Store Dawn OS 2.0

Mr_Zuriri
Tourist
4 1 2

How To Add Back To Top Button On Shopify Online Store Dawn OS 2.0 Any Help would be much appreciated?

Accepted Solution (1)

Ecommpremium
Shopify Partner
508 43 91

This is an accepted solution.

Hi @Mr_Zuriri 

here is code and ful tutorial step by step

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '7em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website

View solution in original post

Replies 9 (9)

Ecommpremium
Shopify Partner
508 43 91

This is an accepted solution.

Hi @Mr_Zuriri 

here is code and ful tutorial step by step

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '7em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
Mr_Zuriri
Tourist
4 1 2

Thank you so much @Ecommpremium  you are always helpful.

Ecommpremium
Shopify Partner
508 43 91

You are welcome!

 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
BenjaminM
Shopify Partner
11 0 1

Hi there!

I've followed this but for some reason it's not even showing in my inspect element.. Trying to get this to show up same way you have done it. 

Ecommpremium
Shopify Partner
508 43 91

Hi @BenjaminM which theme you are using and store url so i can check.

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
BenjaminM
Shopify Partner
11 0 1

Hi @Ecommpremium 

The theme is Dawn 2.0 Ver 11
And the store is https://www.themeatclub.com.sg/

Ecommpremium
Shopify Partner
508 43 91

@BenjaminM See code has not implemented properly!

code.png

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
BenjaminM
Shopify Partner
11 0 1

Ah! It was the '-' between each word! Thank you!

Ecommpremium
Shopify Partner
508 43 91

it means '-' smiling was missing from your code. 🙂

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website