Add Floating Go to Top Button Into Your Website or Blog

Embeddable script 'go to top' button

Today, I'm going to explain how to place a floating "Go to Top" button on your Blogger site. This can also be applied to any website, not just Blogger. The process is straightforward and only requires adding a script before the closing </body> tag of your HTML.

Here's how to do it:

1. Log in to Blogger
- Navigate to the Theme menu.
- On your active theme, instead of pressing Customize, click the triangle icon to reveal additional links.
- Select Edit HTML.
- Scroll to the end of the HTML or search for the </body> tag.
- Insert the following script right before the </body> tag:

Here's the script to Add Floating Go to Top Button in your website (any website).

The only magical part of the entire script is this snippet:

button.addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

Everything else is just about adding the button and styling it.

This little piece of code makes all the difference. It listens for a click on the button and smoothly scrolls the page back to the top. Without this, the button would just be a nice decoration without any functionality.

So, even if the rest of the script involves creating the button, adding styles, and positioning it, this part is what gives it its magic. It's what makes your website more user-friendly by allowing visitors to easily navigate back to the top of the page with a simple click.

Why blogger?

One of the reasons I still use Blogger is that it's free yet offers a wealth of features to customize your blog. You can create or customize widgets and add anything you want, similar to any self-hosted website. When I tried using independent websites like WordPress, I had to manage my own server and set up everything, which was quite painful. All I want to do is publish my content. That's why I love Blogger; the only thing you need to buy is your own domain name.

Adding custom scripts, like the floating "Go to Top" button, is a breeze. You don't need to be a tech wizard to get things done, and there's plenty of room for creativity. Plus, it's a platform that grows with you. As you get more comfortable, you can explore even more advanced customizations and tweaks.

So, if you're like me and prefer a hassle-free blogging experience where you can concentrate on sharing your ideas and stories, Blogger is an excellent choice. It's free, flexible, and powerful enough to make your blog stand out without the steep learning curve that comes with other platforms.


Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

How To Create Spring Boot Project Using Netbeans

Spring Kafka - How to use ReplyingKafkaTemplate send and reply synchronously