Technology are dynamic , it changes frequently . When we ate attached with web development , web development technology , style , look and feel also changes with time . Earlier we used to build a site with several html pages and put link to navigate among the pages .Now thins have changes . Most of the web pages are large , contain lot of information in a single page .This is due to , with the advancement of technology , internet speed have been very much high . It can pull a large page in a second .Thus most of the maker are trying to build a single page website , contain lots of data. Loading speed does not matter. Some write tutorial , which have a good length.
User goes from one portion to another portion of a site , generally they goes from the top to bottom .It is tedious to scroll mouse each time to go top of the site . Jqery scrollTop is a option which drive user to the top of the serene
Here is the full code of a html
page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
.mycss{
width:100px;
height:130px;
padding:10px;
text-align:center;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
}
.mycss:hover{
text-decoration:none;
}
</style>
<body>
<a href="#" class="mycss">Scroll Up ↑</a>
</body>
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
↓<br />
</html>
<script type="text/javascript">
$(document).ready(function () {
//Check to see if the window
is top if not then display button
$(window).scroll(function
() {
if ($(this).scrollTop() > 100) {
$('.mycss').fadeIn();
} else {
$('.mycss').fadeOut();
}
});
$('.mycss').click(function () {
$('html, body').animate({
scrollTop: 10 }, 1000);
return false;
});
});
</script>
Explantion : https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
This is the link of jqery , we can download also.
mycss : This is the class desined for the button
script : This is the heart of this functionality , $(window).scroll , fires when we scroll widows, here if scroll value is more than 100 ,the button will visible.
The second part is $('html, body').animate({ scrollTop: 10 }, 1000);
This tells that html bogy will scrollup to top 10 points at the animation speed of 1000
Output :
Step 1
Step 2
Step 4
No comments:
Post a Comment