How to make Scroll to top button in webpage using Jquery
In this tutorial, I will show you how to make "Scroll to top" button in webpage using Jquery and you can also control speed of "scroll to top" button so that webpage go to top slowly or fastly, According to your choice.
Steps to make Scroll to top button in webpage using Jquery :
- First go to the http://jquery.com/download/ and download the file jquery 3.0 .
- Rename this file as Jquery because it is easy to remember and include.
- After this ,Include Jquery file in your webpage between head section :
<head>
<script src="jquery.js"></script>
</head>
- Now go to the place where you want to place your scroll to top icon,Mostly it is placed in footer section
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Scroll to top</a>
- At last just copy the following code,Place between head section but remember after jquery file:
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
- See your "scroll to top" button is working now .
{[['
']]}
']]}
No comments