Home » , » Scroll to top with jQuery

Scroll to top with jQuery

Written By Unknown on Senin, 19 Agustus 2013 | 22.34


Today I will tell you about scroll to top method.

Earlier it was very difficult and not very fancy like we had used Anchors, I hope you remember.

Anchors are used to enable links to a specific location on a page. Anchor links can be especially useful when navigating between sections of a long document, or when you want to link to a segment of a page instead of the top of the page.

But now days Top Scroll method are more successful. Please see how can we implement it


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll to top</title>
<style type="text/css">
#scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" >
</script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#scroll-to-top').fadeIn();
} else {
$('#scroll-to-top').fadeOut();
}
});

$('#scroll-to-top a').click(function(){
$('body,html').animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
</head>

<body>
<div style="height:1000px;">&nbsp;</div>
<div id="scroll-to-top"><a href="#">Top</a></div>
</body>
</html>

You can view the demo on this page. See the link at right bottom.
You can use images for the top link for better user experience.

Share this article :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Kumpulan Kata Broadcast Blackberry - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger