Scroll to Top using Jquery/Javascript in 3 Easy Steps

Scroll to Top using Jquery/Javascript in

3 Easy Steps

by Pawan

Table of Contents

● Introduction

● Using jQuery Method

● JavaScript ScrollToTop

○ With window.onscroll()

○ With document documentElement scrollTop()

○ With document documentElement scrollIntoView()

● Scroll toTop with No Javascript(using HTMLfragments)

● Conclusion

Introduction

Scroll toTop is a very useful and used feature on many websites With the scroll to the 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 the 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>

<head>

<title>Scroll toTop</title>

</head>

<body>

<h1>ScrollToTop</h1>

<a>Scroll toTop</a>

</body>

</html>

We have added the dummy images so our HTMLpage 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 the 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:

ScrollToTop 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');

});

ScrollToTop 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

CodePen Embed Fallback

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:

CodePen Embed Fallback

});

With document.documentElement.scrollIntoView()

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

CodePen Embed Fallback

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 ScrollToTop Source code

Scroll to Top with No Javascript(using HTML fragments)

HTMLfragments 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 HTMLfragments are a pretty powerful way for navigating your website section

<!DOCTYPE html>

<head>

<title>Scroll toTop</title>

<style>

html {

scroll-behavior: smooth; } </style>

</head>

<h1>ScrollToTop</h1>

<a href="#top">Scroll toTop</a> </body>

</html>

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

You can check this code in our Github repo: ScrollToTop without JS

Conclusion

We highly recommend using the jQuery method because it’s short and less verbose Use Javascript ScrollToTop 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 IsekaiAnime, check our article on 15 IsekaiAnime with OPmc

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!

Turn static files into dynamic content formats.

Create a flipbook