How to Add - Back to Top button on Blogger?

Back to Top button is very much required if we have a blog with lengthy posts.
In such cases, we need to have a button at the bottom of the page which is static.
By clicking this button the page should go to the top of the page.

Let us see the process of adding Back to Top button on blogger.


1. We should have a button image and its address
We can either create a button using paint and then upload it to any of the blog post and get its address
(by Right click -> Copy Link Location) or
Get the address of any button image from the web.

Image link location by using (Right Click -> Copy Link Location) for the above image.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2KwA_i7wo5x3lkiAqXTTd-dpGmY7_PjJMv8mP8GdPwD2aa3Ri6_WVzQzWmPhOCR-z8Y_A_6RxjYovym-pgOLjvHf7NbMvTrdUZn99vhTIgb70j5vsWMw1N7Jaob5ZZg1izSr1NTF1MnR/s1600/image13.png

2. We need to have code for the "Back to Top" button functionality as shown below.


<a style="display:scroll;position:fixed;bottom:5px;right:50px;"href="#" title="Back to top of Page"><img src="BUTTON IMAGE ADDRESS"/></a>

NOTE: Here upon clicking the button, the page should navigate to the address "#" (here # refers to top of the blog page).

3. Replace the BUTTON IMAGE ADDRESS text with the actual button address.

<a style="display:scroll;position:fixed;bottom:5px;right:50px;"href="#" title="Back to top of Page"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2KwA_i7wo5x3lkiAqXTTd-dpGmY7_PjJMv8mP8GdPwD2aa3Ri6_WVzQzWmPhOCR-z8Y_A_6RxjYovym-pgOLjvHf7NbMvTrdUZn99vhTIgb70j5vsWMw1N7Jaob5ZZg1izSr1NTF1MnR/s1600/image13.png"/></a>


4. Add a gadget - HTML/JavaScript with the code that we have for Back to Top functionality.

5. Save the gadget and save template.

6. view the blog to see the changes.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.