Banner image of Scroll to Top using JqueryJavascript in 3 Easy Steps

Scroll to Top using Jquery/Javascript in 3 Easy Steps

by

Introduction

Scroll to Top is very useful and used feature on many websites. With the scroll to top button, we can enable website visitors to jump back to the top section of our website with a single click.

With the javascript scrolltotop button, you can boost page ranking to the top of search results by making your website easily navigatable. Speaking of good navigation, check out our Crud in CodeIgniter 4 latest version.

Here we will show you how to make a custom Javascript scroll to top. Or you use jQuery as well. We will teach you both methods and a bonus method.

So without further ado, let’s get started.

Using jQuery Method

Using the jQuery method, your code is easy to read and understand. And since jQuery is a highly popular library and used in all kinds of websites, this method is one of the best.

Then let’s get to the coding section:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll to Top</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Scroll To Top</h1>

  <img src="image.jpg" alt="image">
  <img src="image.jpg" alt="image">
  <img src="image.jpg" alt="image">

  <a>Scroll to Top</a>

  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

We have added the dummy images so our HTML page becomes a little longer for scrolling to properly work. Also, we added some basic styling for our ScrollToTop button in style.css.

Now actual logic is written in our “app.js” file. Let’s explain it:

  1. First, we track the click of our <a> tag using the click() function of jQuery.
  2. Next, we have added the animate() function which allows us the smooth scroll when we implement scrollTop to zero.
  3. Voila! You have successfully implemented js scroll to top of your webpage.
$("a").click(function (e) {
  e.preventDefault();
  $('html, body').animate({ scrollTop: 0 }, 'slow');
});

Feel free to check this whole code. You can download it from our Github Repo directly with this link:

Scroll To Top with the jQuery

Want more?

What if you want to activate your scroll-to-top functionality after a certain distance is scrolled down on your webpage? Then just make these small modifications to your jQuery code:

Using the jQuery scroll() function we first determine if enough page is scrolled. Then only we start showing the scrolltotop button to website visitors. And once we reach the top of the page, the button disappears again.

$(window).scroll(function () {
  if ($(window).scrollTop() >= 600) {
    $("a").css("display", "block");
  } else {
    $("a").css("display", "none");
  }
});

$("a").click(function (e) {
  $('html, body').animate({ scrollTop: 0 }, 'slow');
});
Scroll To Top with the jQuery(Advance Version)

JavaScript ScrollToTop

Using javascript scrolltotop is ideal in a situation where you cannot use the jQuery library. There are multiple ways to achieve this. Here are the 3 most used methods to build javascript scrolltotop:

With window.onscroll()

This is the easiest method when using only javascript in your project.

With document.documentElement.scrollTop()

If for any reason, our previous Javascript scrolltotop method didn’t work. Feel free to try this method. Check out the below CodePen where we give you a live example:

With document.documentElement.scrollIntoView()

Lastly, try this new javascript scrolltotop method using the document object modal. We explain it in the below CodePen example:

Note: Adding “scroll-behavior: smooth” is a must in your CSS file. Without this code, your scrolling animation will be instantaneous and will feel jerky.

If you are looking to bling up your website with Page Scroll animations, check out our post on 6 methods to implement page scroll animation.

Check out our code at Github Repo directly:

Javascript Scroll To Top Source code

Scroll to Top with No Javascript(using HTML fragments)

HTML fragments allow scrolling to any section of a webpage linked with the “id” and “<a href=”#id”> tag” combination. So we can use this combo to simulate scrolling to the top without js.

But we don’t recommend using it professionally in your project.

Still, this way you can see that HTML fragments are a pretty powerful way for navigating your website section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll to Top</title>
  <link rel="stylesheet" href="style.css">
  <style>
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>

<body id="top">
  <h1>Scroll To Top</h1>

  <img src="image.jpg" alt="image">
  <img src="image.jpg" alt="image">
  <img src="image.jpg" alt="image">

  <a href="#top">Scroll to Top</a>
  
</body>
</html>

By the way, if you are trying to learn how to build an HTML form with PHPmailer check out this guide.

You can check this code in our Github repo:

Scroll To Top without JS

Conclusion

We highly recommend using the jQuery method because it’s short and less verbose. Use Javascript Scroll To Top functionality only when your project doesn’t need jQuery at all.

We hope you enjoyed our article on how to build a js scroll to top button for your website. With this knowledge, we know that you can implement scrolling to the top of your website to make it easier for your customers to find important information.

So what are you waiting for? Check out our other post where we build an Image Format Converter. Also if you are a fan of Isekai Anime, check our article on 16 Isekai Anime with OP mc in 2024.

Thanks so much for reading. If you have any doubts, comment and ask us. We always try to give prompt replies. Keep coding! Ta-da!

Leave a Comment