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;"> </div>
<div id="scroll-to-top"><a href="#">Top</a></div>
</body>
</html>
You can use images for the top link for better user experience.
Posting Komentar