Smooth Scroll: Enhancing User Experience In 5 Steps

Imagine you’re on a website, reading something interesting, and you want to move down the page. Normally, when you click to move down, it’s like you’re jumping from one spot to another. But smooth scrolling changes that! It makes things super smooth, like when you pour honey and it flows seamlessly. So, instead of sudden jumps, the page glides gently as you go down. This makes the whole experience look really nice and elegant. It’s like a fancy dance for your eyes while you explore the webpage. 🕺🌟

Step 1: Getting Ready to Make Magic Happen

In the first step, we’re setting the stage for some enchanting web effects using a JavaScript library called jQuery. Just like a magician prepares for a show, we’re getting everything ready behind the scenes.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery(document).ready(function($) {
    // Code goes here
});

Here, we’re waiting for the document (your web page) to be fully ready before we start working our coding magic. The function($) part lets us use the shortcut $ to refer to jQuery, making our code shorter and easier to read.

Step 2: Linking to Smooth Scrolls

Imagine you have a long webpage, and you want to create a cool effect where clicking on a link smoothly scrolls the page to a specific section. This is where our next code snippet comes in.

$('a[href^="#"]').on('click', function(event) {
    // Code goes here
});

Here, we’re looking for all the links (<a> tags) that start with a #. These are often used to link to sections within the same page, like jumping to different parts of a blog post. When someone clicks on one of these links, we want to do something special.

Step 3: Preventing Default Action

Now, when someone clicks on a link, the usual behavior is to jump to the section instantly. But we’re going for something smoother, like a graceful ballet move. So, we’re going to stop that default behavior for a moment.

event.preventDefault();

This line tells the browser, “Hey, don’t do your usual jumping around when this link is clicked. Things are being handled differently by us.”

Step 4: Finding the Target

The next step is to decide where on the page we want to navigate to. Just like a treasure map leads to a hidden chest, we’re locating the ‘target’ section of the page that the clicked link points to.

var target = $(this.getAttribute('href'));

Here, the portion of the page that the link points to is found by using $(this.getAttribute(‘href’)). It seems like we are locating the precise location where the ‘X’ is located on the treasure map.

Learn Disabling Right-Click On Website

Step 5: Smooth Scroll Animation

Now comes the grand moment: the smooth-scrolling animation. We want the page to glide gracefully to the target section when the link is clicked. It’s like a cinematic transition in a movie.

if (target.length) {
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 1000); // Adjust the animation speed as needed
}

We’re checking if we actually found a target section (that ‘X’ on the map). If we did, we’d use the animate() function to make the page scroll smoothly. We’re telling it to scroll to the top position of the target section. The 1000 here determines how fast the animation happens; you can adjust it to make it faster or slower, depending on the feel you want.

Full code

        jQuery(document).ready(function($) {
            $('a[href^="#"]').on('click', function(event) {
                event.preventDefault();
                var target = $(this.getAttribute('href'));
                if (target.length) {
                    $('html, body').stop().animate({
                        scrollTop: target.offset().top
                    }, 1000);
                }
            });
        });

Full code on codepen

Just like a magician’s performance, this code orchestrates a beautiful dance of smooth scrolling when someone clicks on links that point to sections within your web page. It improves the look even more and improves readers’ enjoyment of your blog.