Introduction:
In this article I will explain an
example of scroll button to top of the page using jquery. Scroll to top will be
smooth and attractive.
HTML anchor tag with id ScrollButton
will be there at the bottom of the Page. When we click this element, it will
scroll the page smoothly back to top of the page.
Following jquery code will be used to scroll control to top of the
page:
<script type = "text/javascript">
$(function () {
$('#ScrollButton').bind("click", function () {
$('html, body').animate({
scrollTop: 0 }, 1200);
return false;
});
});
</script>
Full Source Code of Scroll to Top Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
#ScrollButton
{
cursor:pointer;
background-color:#453530;
display:inline-block;
height:40px;
width:40px;
color:#fff;
font-size:16pt;
text-align:center;
text-decoration:none;
line-height:40px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$(function () {
$('#ScrollButton').bind("click", function () {
$('html, body').animate({
scrollTop: 0 }, 1200);
return false;
});
});
</script>
</head>
<body>
Welcome to Maziksolutions<br />Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
Welcome to Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />Welcome to
Maziksolutions<br />
<div align = "right">
<a href="javascript:;" id="ScrollButton">▲</a>
</div>
</body>
</html>
0 comments:
Post a Comment