To add a "Back to Top" button on your Blogger blog, you can follow these steps:
1. Go to your Blogger Dashboard and click on "Theme" from the left-hand menu
2. Click on "Edit HTML".
3. Scroll down the code until you find the closing </body> tag.
4. Paste the following code just above the </body> tag:
<div class="scroll-top">
<!-- SVG Icon -->
<svg height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
<path d="M4,12l1.41,1.41L11,7.83V20h2V7.83l5.58,5.59L20,12l-8,-8 -8,8z"></path>
</svg>
</div><script>
var sbt = document.querySelector(".scroll-top");
window.onscroll = function () {
sbt.classList.toggle("active", window.scrollY > 380);
sbt.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" })
}
}
</script>5. Scroll up the code until you find the closing </head> tag.
6. Paste the following code just above the </head> tag:
<style>
.scroll-top {
position: fixed;
right: 30px;
bottom: -50px;
background: #0084ff;
padding: 6px 5px;
border-radius: 4px;
transition: all 0.3s;
}
.scroll-top svg {
fill: #fff;
}
.scroll-top:hover {
box-shadow: 0 0 20px #0084ff;
cursor: pointer;
}
.scroll-top.active {
bottom: 30px;
}
</style>7. Save your changes and exit the code editor. and view your blog to see the "Back to Top" button.