8
How to Scroll to the Top of the Page Using jQuery/JavaScript
source link: https://www.laravelcode.com/post/how-to-scroll-to-the-top-of-the-page-using-jquery-javascript
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Scroll to the Top of the Page Using jQuery/JavaScript
Use the scrollTop Property
You can use the jQuery animate() method in combination with the scrollTop property to scroll to the top of the web page smoothly with an animation.
Let's try out the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery scrollTop Animation</title>
<style>
.scroll-top{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
});
</script>
</head>
<body>
<button type="button" class="scroll-top">Go to Top</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>However, if you simply want to scroll to the top of the page without any animation or jQuery you can use the native JavaScript window.scrollTo(x-coord, y-coord) method, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Scroll to Top</title>
<style>
.scroll-top{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
}
</style>
<script>
function goToTop(){
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<button type="button" class="scroll-top" onclick="goToTop();">Go to Top</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK