Introduction
In this article i will show you how to design Scroll Top button in bottom right corner also when we click on it then we reach at top position of web browser. I will give an example of ScrollTop button which is used to scroll the page at top position.
Description
First to design the button at bottom right corner using this line of code.
<div align="right">
<a href="javascript:;" id="scrolltop1">▲</a>
</div>
After that apply formatting on button using css class.
<style>
#scrolltop1{
cursor:pointer;
background-color:#00abcd;
display:inline-block;
height:50px;
width:50px;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
line-height:50px;
}
</style>
Now, scroll the page using script file, which is mentioned below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#scrolltop1').bind("click", function () {
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;
})
})
</script>
In this script function when we click on hyperlink button, which is mentioned in bottom right corner then run animate function. In animate function we have one property that is scrollTop which is used to scroll the page.
Complete Source code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScrollTop Button in Bottom Right Corner</title>
<style>
#scrolltop1{
cursor:pointer;
background-color:#00abcd;
display:inline-block;
height:50px;
width:50px;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
line-height:50px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#scrolltop1').bind("click", function () {
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;
})
})
</script>
</head>
<body>
Welcome to dotprogramming.blogspot.com<br/>
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
v
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
<div align="right">
<a href="javascript:;" id="scrolltop1">▲</a>
</div>
</body>
</html>
In this article i will show you how to design Scroll Top button in bottom right corner also when we click on it then we reach at top position of web browser. I will give an example of ScrollTop button which is used to scroll the page at top position.
Description
First to design the button at bottom right corner using this line of code.
<div align="right">
<a href="javascript:;" id="scrolltop1">▲</a>
</div>
After that apply formatting on button using css class.
<style>
#scrolltop1{
cursor:pointer;
background-color:#00abcd;
display:inline-block;
height:50px;
width:50px;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
line-height:50px;
}
</style>
Now, scroll the page using script file, which is mentioned below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#scrolltop1').bind("click", function () {
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;
})
})
</script>
In this script function when we click on hyperlink button, which is mentioned in bottom right corner then run animate function. In animate function we have one property that is scrollTop which is used to scroll the page.
Complete Source code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScrollTop Button in Bottom Right Corner</title>
<style>
#scrolltop1{
cursor:pointer;
background-color:#00abcd;
display:inline-block;
height:50px;
width:50px;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
line-height:50px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$('#scrolltop1').bind("click", function () {
$('html,body').animate({ scrollTop: 0 }, 1000);
return false;
})
})
</script>
</head>
<body>
Welcome to dotprogramming.blogspot.com<br/>
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
v
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
Welcome to dotprogramming.blogspot.com<br />
<div align="right">
<a href="javascript:;" id="scrolltop1">▲</a>
</div>
</body>
</html>