In this tutorial We will learn how to add a simple and fancy cool scroll to top feature using jQuery.
Scroll to top is a very useful feature when you have a long page website. This make your website page scrolling easily.
Preparing HTML Step 1:
Add HTML code to display scroll to top image.
Add this code at bottom of webpage before </body> tag.
<div class="scrolltop"></div>
Preparing CSS Step 2:
Add CSS for class scrolltop. And also place a small arrow image scrolltop.png in images folder.
.scrolltop
display: none;
background: url(img/scrolltop.png) no-repeat;
width: 44px;
height: 44px;
position: fixed;
right: 90px;
bottom: 30px;
cursor: pointer;
Preparing jQuery library Step 3:
Call jQuery Library.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Preparing jQuery code Step 4:
Now add following jQuery code.
<script type="text/javascript">
$(document).ready(function()
$(window).scroll(function()
if ($(this).scrollTop() > 80)
$(".scrolltop").fadeIn('slow');
else
$(".scrolltop").fadeOut('slow');
);
$(".scrolltop").click(function()
$("html, body").animate( scrollTop: 0 , 'slow');
);
);
</script>
You have Done!!!
jQuery Scroll To Top
Thanks for sharing, nice post! Post really provice useful information!
ReplyDeleteGiaonhan247 chuyên dịch vụ mua hàng mỹ từ dịch vụ order hàng mỹ hay nhận mua nước hoa pháp từ website nổi tiếng hàng đầu nước Mỹ mua hàng ebay ship về VN uy tín, giá rẻ.