Back to Top Button For Debut Theme

[Song]

I want to add a "Back to Top" button to my shop, so I followed the tutorial step by step in this link: https://shopify.dev/tutorials/customize-theme-add-back-to-top -button In the previous version of DEBUT themes, the Back to Top button works perfectly, but when I update to the latest DEBUT (VERSION 17.5.0), the button cannot be displayed on the front page. In fact, when I use the same settings in the latest Brookly theme, the button works perfectly. I feel very confused. I don't know what has changed in the latest DEBUT (VERSION 17.5.0) theme, causing the button to not work properly. Can anyone help me? Maybe you don't use the method provided in the link above. If you can tell me a new way to add a "Back to Top" button to the store, that would be better.

[Jasoliya · Accepted solution]

Hi @Song 

Follow this:

add this code in theme.liquid file just before </body>

<a href="#" id="scroll" style="display: none;"><span></span></a>

Add this css in Asset->theme.scss file at bottom:

#scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px }
#scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff; }
#scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; }

Add this Js code in Asset->theme.js file at bottom:

$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});

[Song]

Thank you very much for your reply, but why does the link method not work? Where is the problem?

https://shopify.dev/tutorials/customize-theme-add-back-to-top-button 

[Jasoliya · Accepted solution]

May be doc removed by that's why. 

[Song]

OK, Your method works perfectly, thanks

[kub]

Hi all.

I have the same problem like @Song . I updated to 17.7 and several things don't work anymore like this.

So i added

 {% render 'back-to-the-top' %}

before the 

</body>

in theme.liquid

and the code

 {% 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 = '4em' %}
    <a href="#" title="inizio pagina" class="back-to-top">
    <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>
    .fa {
    color: #fff;
    }
    .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #fff;
    background-color: #4d1717;
    font-size: 16px;
    padding: 0.3em;
    display: none;
    -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;
    }
    </style>
    <script>
    window.onload = function() {
    jQuery(function($) {
    var offset = {{ vertical_offset_for_trigger }};
    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;
    })
    });
    }
    </script>

 in snippet 

back-to-the-top.liquid

No way

Somebody can help?

Thanks in advance

Maybe also if somebody knows about the tabs in product description do not work anymore propperly (was working fine until V17.7DEBUT) https://community.shopify.com/c/Shopify-Design/Adding-tabs-on-product-page-simple-entry/td-p/430363/...

[Christie_c01]

 Jasoliya,I have done everything, as you have said, but it doesn't on my Shopify site.

[Jasoliya]

Send your store url 

[Christie_c01]

It's resolved, thanks!