jquery scroll to top

jQuery scroll to top animation is a beautiful light weight jQuery effect that is effectively used to navigate to the to of the webpage when a user scrolls down to a considerable length.

The first thing we'll need in this case is an object that will be used as the navigation handle that might be an image or an icon. Let's add a fa icon for this example.

<a href="#" class="to-top"><i class="fa fa-chevron-up"></i></a>

Let's add the basic styling for this icon then.

<style>
.to-top { 	
	position: fixed; 
	bottom: 20px; 
	right: 20px; 
	text-decoration: none; 
	color: #fff; 
	background: #151f28; 
	padding: 10px 20px; 
	display: none; 
}
.to-top:hover{ 
	color: #151f28; 
	background: #fff; 
}
</style>	

We'll keep this icon fixed at the bottom of the window leaving 20px margin from the bottom and the right. Since we wrapped it with the HTMl <a> element, an underline will appear below the link text. To remove that, we added text-decoration: none;. Then defined the color of the icon as well as background color and padding. Since we won't need to display it while the user is at the top of the page, we'll hide it with display: none; attribute. We'll use jQuery to display it once the user scrolls down to a defined height of the page.

We also defined some changes when the user hovers the mouse over it to make it more noticeable.

Now, we'll need to add the jQuery for the effect to be functional and for that we'll require to add jquery.js file to our page. Add that file and simply paste the script given below.

<script>            
var duration = 500;
$(window).scroll(function() {
	if ($(this).scrollTop() > 200) {
    $('.to-top').fadeIn(duration);
	} else {
    $('.to-top').fadeOut(duration);
	}
});

$('.to-top').click(function(event) {
	event.preventDefault();
	$('html').animate({scrollTop: 0}, duration);
	return false;
})
</script>	

Here, $(document).ready(function() {}); prevents the script from being read by browser before the page is completely loaded. We created a variable named duration here for our convenience as it's being used multiple times in the script and it's be easier to change its value at one point rather than all those lines.

$(window).scroll(function() {}); is triggered when a user scrolls the browser window. If the scroll amount exceeds 200px then the to-top class will fade in and the fadein animation duration would be the one we defined in varaible duration earlier else to-top class weill fade out using the same animation duration.

Well, half of the task is completed then. The icon will now be hidden until the user scrolls more that 200px. It will be hidden in case the user scrolls back to the top when the scroll amount becomes less than 200px.

Now, lets go for the scroll to top animation.

$('.to-top').click(function(event) {}) will be triggered once the user clicks on the to-top class.

event.preventDefault(); will prevent the url link defined in the HTML <a> element.

Finally, $('html').animate({scrollTop: 0}, duration); will be the key to get the animation to get scrolled to the very top of the HTML page applying animation duration as defined in variable duration. return false will prevent further execution of the script unless the event is triggered again.

---

0 Like 0 Dislike 0 Comment Share Tweet