Browser versions supported

This technique works in all modern browsers. I tested in a number of browsers including IE6 and FF1 using the HTML 5 DOCTYPE.

jQuery version requirements

jQuery 1.2 or higher is required. I’ve tested this in 1.2, 1.2.6, 1.3.2, 1.4.4, 1.5.2, 1.6.2

Scroll to the bottom of a page

The technique is exactly the same for scrolling to the bottom of a page, but scroll to the height of the document instead. I’ve covered how to do this in the post Scroll to the bottom of a page with jQuery.

Working example

Click through here to a full working example which shows scrolling to both the bottom and top of the page. View the source of that page to get the full HTML required.

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

Scroll To Top

$("a").css("display", "none");

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:

Scroll to Top with No Javascript(using HTML fragments)