scrollTop() method:
It is used to get the vertical scrollbar position for the selected html elements and once we get the scrollbar position we can use it in our jquery.
Syntax:
$(selector).scrollTop() // returns vertical scrollbar position
JQuery code to scroll to top in a page:
$(document).ready(function() {
// It show or hide the scroll to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 210) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
In the above jquery code when scrollTop value is less than 210 then the scroll to top button will not visible and if value is greater than 210 than the button will be visible to user.
Working Example: https://jsfiddle.net/dp2novvz/
0 Comment(s)