Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Scroll to the top of the page using JavaScript/ jQuery?
Scrolling to the top of a page is a common user experience feature that improves navigation, especially on long pages. JavaScript and jQuery provide several methods to achieve smooth scrolling to the top.
Using jQuery animate() Method
The most popular approach uses jQuery's animate() method to create a smooth scrolling effect:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { height: 2000px; padding: 20px; }
#scrollBtn { position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h3>TOP OF PAGE</h3>
<p>Scroll down to see the "Scroll to Top" button...</p>
<div style="margin-top: 1500px;">
<h3>BOTTOM OF PAGE</h3>
<button id="scrollBtn">Scroll to Top</button>
</div>
<script>
$("#scrollBtn").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
</body>
</html>
Using Vanilla JavaScript scrollTo()
Modern browsers support smooth scrolling natively without jQuery:
<!DOCTYPE html>
<html>
<head>
<style>
body { height: 2000px; padding: 20px; }
#vanillaBtn { position: fixed; bottom: 70px; right: 20px; padding: 10px 20px; background: #28a745; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h3>TOP OF PAGE</h3>
<p>This example uses vanilla JavaScript</p>
<div style="margin-top: 1500px;">
<h3>BOTTOM OF PAGE</h3>
<button id="vanillaBtn">Scroll to Top (JS)</button>
</div>
<script>
document.getElementById('vanillaBtn').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
</body>
</html>
Instant Scroll Without Animation
For immediate scrolling without smooth animation:
// jQuery - instant scroll
$("html, body").scrollTop(0);
// Vanilla JavaScript - instant scroll
window.scrollTo(0, 0);
Comparison of Methods
| Method | Dependencies | Animation | Browser Support |
|---|---|---|---|
| jQuery animate() | Requires jQuery | Yes | All browsers |
| scrollTo() with behavior | None | Yes | Modern browsers |
| scrollTo(0, 0) | None | No | All browsers |
Best Practices
Consider showing the scroll button only when users have scrolled down:
window.addEventListener('scroll', function() {
const scrollBtn = document.getElementById('scrollBtn');
if (window.scrollY > 300) {
scrollBtn.style.display = 'block';
} else {
scrollBtn.style.display = 'none';
}
});
Conclusion
Use jQuery's animate() for older browser support or vanilla JavaScript's scrollTo() with behavior: 'smooth' for modern applications. Both provide excellent user experience with smooth scrolling animations.
Updated on: 2026-03-15T21:43:20+05:30
324 Views
Advertisements