Fix the play around issue between go back and back to top icon on Dawn Theme

[NatalieY123]

Hello, I put below code in a newly create snippets "back-button.liquid", then include this snippet in "main-product.liquid" file by below code:-

{% include "back-button" %}

I also follow this shopify guidelines https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-... to add the back to top icon. My problem now is when I am at the bottom of the page click the back to top icon, when go up to the top then click the go back icon, it will just go back to the "back to top" icon again, you know just play around these two icons then. Without clicking the back to top icon, then go straight to click the go back icon would be working fine. I guess this is because the back to top icon is the last click point, that's why when click go back it will just go back to back to top icon. Can anyone help to get this fix? I want the go back icon can go back to the previous page.

<style>
.back-btn__wrapper svg {
width: 28px;
height: 20px;
}

.back-btn__wrapper {
margin-bottom: 12px;
}

.back-btn {
background: #fff;
padding: 10px 7px 4px 6px;
display: inline-flex;
align-items: center;
}

.back-btn-text {
margin-left: 5px;
}

.back-btn:hover {
border-radius: 26px;
background: #f0f0f0;
}
</style>

<div class="back-btn__wrapper">
<a class="back-btn" href="#" onclick="goBackToCollection()">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="493.578px" height="493.578px" viewBox="0 0 493.578 493.578" style="enable-background:new 0 0 493.578 493.578;" xml:space="preserve">
<g>
<path d="M487.267,225.981c0-17.365-13.999-31.518-31.518-31.518H194.501L305.35,83.615c12.24-12.24,12.24-32.207,0-44.676 L275.592,9.18c-12.24-12.24-32.207-12.24-44.676,0L15.568,224.527c-6.12,6.12-9.256,14.153-9.256,22.262 c0,8.032,3.136,16.142,9.256,22.262l215.348,215.348c12.24,12.239,32.207,12.239,44.676,0l29.758-29.759 c12.24-12.24,12.24-32.207,0-44.676L194.501,299.498h261.094c17.366,0,31.519-14.153,31.519-31.519L487.267,225.981z"/>
</g>
</svg>
<span class="back-btn-text">Go back</span>
</a>
</div>

<script>
function goBackToCollection() {
history.go(-1);
}
</script>

'

[CodingFifty]

Hi @NatalieY123,

Yes, it's possible to do that, but it will require modifications in the code.

[NatalieY123]

How the coding should look like? or how to do if I just add the back to top icon on homepage as only homepage is too long