SCROLL TOP AND SCROLL BOTTOM BUTTONS
.
.
.
.
.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
#toplink, #botlink {
position: fixed;
right: 1%;
bottom: 50%;
padding: 10px;
margin: 0 -20px 0 0;
color: #FFFFFF;
font: 14px Arial;
background: #105105;
border: 1px solid #FBBB22;
border-bottom: 1px solid #FBBB22;
border-radius: 6px 3px 0 0;
z-index: 99;}
#botlink {
top: 50%;
padding: 10px;
background: #661111;
bottom: auto;
border: 1px solid #FBBB22;
border-top: 1px solid #FBBB22;
border-radius: 0 0 3px 6px;}
#toplink:hover {
color: #FFFFFF;
background: #207907;
text-decoration: none;}
#botlink:hover {
color: #FFFFFF;
background: #FF1111;
text-decoration: none;}
</style>
<script>
$.fn.ready(function() {
$("a[href=#top]").live("click", function(e) {
$("html,body").animate({scrollTop:0}, 1000);
e.preventDefault();});
$("a[href=#bot]").live("click", function(e) {
$("html,body").animate({scrollTop:$(document).height()}, 1000);
e.preventDefault();});});
</script>
<a href="#top" id="toplink" title="Go to top">▲</a>
<a href="#bot" id="botlink" title="Go to bottom">▼</a>';
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<a href='#' style='display:scroll;position:fixed;bottom:53%;right:5px;' title='Back to top'><img src='https://lh4.googleusercontent.com/-nnpwLIYCtN8/VXE-3jJvSiI/AAAAAAAARm4/F1KDkbaSrZg/s50-no/top-button.jpg' width="30" height="30"/></a><br/>
<a href='#Go Down' style='display:scroll;position:fixed;bottom:50%;right:5px;' title='Go Down'><img src='https://lh4.googleusercontent.com/-cQT6KkDw5H8/VXE-3mHMMjI/AAAAAAAARm8/N_G0Ns0Kgeo/s50-no/bottom-button.jpg' width="30" height="30"/></a> <a name='Go Down'></a>
