Inside this article we will see the concept i.e jQuery Cross Browser Scroll To Top with Animation Tutorial. Article contains the classified information about Scroll to the top of the page using JavaScript / jQuery.
If you are looking for a solution i.e jQuery Smooth Animated Scroll to Top of page Using jQuery / Javascript then this article will help you a lot for this. Tutorial is super easy to understand and implement it in your code as well.
Read More: How To Integrate AdminLTE 3 in Laravel 9 Tutorial
Let’s get started.
Application Programming
Create a folder say smooth-scroll in your localhost directory. Create a file index.html into it.
<!DOCTYPE html>
<html>
<head>
<title>
Cross Browser Scroll To Top with Animation
</title>
<style>
.scroll {
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
Cross Browser Scroll To Top with Animation
</h1>
<p>Itaque numquam debitis sunt magna dapibus, diamlorem esse, tempor ullamcorper, cupiditate ut nonummy eaque, ex. Luctus, nulla platea, curae accusantium laboriosam distinctio a consequuntur rutrum fusce metus rutrum minus vestibulum, pellentesque aptent
odio, reprehenderit cupidatat, iure mi tempore cubilia, imperdiet, excepturi cumque. Optio elementum senectus a auctor recusandae, deleniti quisque recusandae, corporis. Tortor ducimus dictumst nascetur, soluta deleniti laoreet commodo, auctor
quidem aute donec! Tellus sociosqu, risus praesent, illum quidem donec magnam? Pede erat, dolores urna! Suspendisse. In, etiam nostrum diamlorem? Rerum nam sequi architecto natus. Ultrices ipsum enim fringilla quo architecto, dolor netus ridiculus
irure, fermentum scelerisque ultricies! Ad.</p>
<!-- Add More Contents Here To See Scroll Effect -->
<button onclick="scrollToTop()">
Click to scroll to top
</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function scrollToTop() {
$('html,body').animate({
scrollTop: 0
}, 'slow');
return false;
}
</script>
</body>
</html>Concept
We added a scroll to top button.
<button onclick="scrollToTop()">
Click to scroll to top
</button>Read More: Laravel 9 Where Clause with Function Query Example Tutorial
We handled, on click event with animation.
function scrollToTop() {
$('html,body').animate({
scrollTop: 0
}, 'slow');
return false;
}Application Testing
Open browser and type your application URL:
URL: http://localhost/smooth-scroll/index.html
When you click on Click to scroll to top Button, it will scroll you to top of the page with the animation effect.
Read More: Laravel 9 Eloquent How To Find Data Using Multiple Ids Tutorial
We hope this article helped you to learn jQuery Cross Browser Scroll To Top with Animation Tutorial in a very detailed way.
Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.
If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.
