Suppose when any page has lot of information and you are at the bottom of the page and we want to back at top of the page, either you can refresh the page or click on a link there.
Example:
Html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>scroll</title>
</head>
<body style="width:50%;margin:30px auto;background-color: beige;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
<a href="#" class="scrollToTop">Scroll To Top</a>
<!-- link to scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
In above html code there is one link(i.e scoll to top) and to activate the jquey we need to add the jquery library in our html file.
Css code:
.scrollToTop{
background: rgba(0, 0, 0, 0) url("images/arrow_up_icon.jpeg") no-repeat scroll 27px 33px / 61% 61%;
color: #444;
display: none;
font-weight: bold;
height: 127px;
padding: 10px;
position: fixed;
right: 61px;
text-align: center;
text-decoration: none;
bottom: 79px;
}
.scrollToTop:hover{
text-decoration:none;
}
in above code i have added a background image.
jquery code :
<script type="text/javascript">
//browser window scroll (in pixels) after which the "back to top" link is shown
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 110}, 'slow');
return false;
});
});
</script>
in jquery the scroll link is visible when window size is greater than 100(i.e > 100px) and if window size is less than 100 then that link will disappear. And when you click on the link page will automatically reach at the top with 'slow' animation effects.
0 Comment(s)