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

-
Image
MySQL and MariaDB password As already mentioned in the title of this blog, this error message sometimes occurred when we are trying to update our root password database, either MySQL or MariaDB, The error says: ERROR 1348 (HY000): Column 'Password' is not updatable This is because if we use this SQL command to update our database root password, and it turn out to be Restricted by MySQL to use update on mysql database. UPDATE mysql.user SET Password=PASSWORD('1234') WHERE User='root'; The solutions for MySQL Error1348 So you can not update a user password using Update commands, to update the password, use ALTER commands instead. like the following. ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; And then you need to do the flush privileges to commit previous queries (that alter command above) into the system, simply do like this. flush privileges; So now you have your root with password 1234. Although it is recommended to
Read more

How To Create Spring Boot Project Using Netbeans

-
Image
Spring Boot is a handy tool that simplifies the development of Spring Framework applications by reducing the need for cumbersome configuration. In this tutorial, I'll guide you through creating a Spring Boot application using the Netbeans IDE. While you can certainly create a Spring Boot application in Netbeans manually, it's much easier with a plugin designed for Spring development. Here's a step-by-step guide to get you started: 1. Install the Spring Boot Plugin: Open Netbeans and navigate to the Tools menu. Click on "Plugins." Once the Plugins window opens, select the "Available Plugins" tab. Look for the "Nb SpringBoot" plugin, then install and activate it. 2. Create a New Spring Boot Project: After restarting Netbeans IDE, you can create a new project with Spring Boot. Go to File > New Project. Under Categories, select Maven, then choose "Spring Boot Basic." 3. Add Dependencies: With your new project created, open the po
Read more

How To Connect SSH Using PEM Certificate On Windows

-
Image
Usually you will need a pair of SSH username and password to connect to a remote server. But there's also another way to connect to the server via SSH but without password, just using a dot pem (example.pem) file. Here's how we usually do on Windows 1. Let’s SSH login using pem to confirm if it’s throwing error or the pem is fine, if error then we need to move to step 2 to fix it: ssh adam@10.0.0.123  -i server-cert.pem And here's the usual error that will throw if your pem file is not ready for SSH login. You need to follow the next step to make your pem certificate ready to login to your server via SSH. 2. Open Windows Explorer, then right-click on the pem file, then select "Properties". Navigate to the "Security" tab, and click "Advanced" 3. Disable inheritance 4. Delete all permissions, so it doesn’t have any permission 5. Now add you as the only only owner. By click button Add and then Select a principal, then Advanced. 6. On the showing p
Read more