качаем картинку http://ucwebs.ru/_ph/1/2/594309251.jpg
Перед < /body>
Quote
<script type="text/javascript">$(document).ready(function(){$("#back-top").hide();$(function (){$(window).scroll(function (){if ($(this).scrollTop() > 100){$('#back-top').fadeIn()}else{$('#back-top').fadeOut()}});$('#back-top a').click(function (){$('body,html').animate({scrollTop:0},800);return false})})});</script>
<p id="back-top">
<a href="#top"> <img src="http://exta.clan.su/skins/top.gif" border="0" align="absmiddle"> Наверх</a>
</p>
В CSS:
Quote
#back-top{position:fixed;top:30px;right:10px;margin-left:0}
#back-top a{width:80px;padding-top:10px;height:24px;display:block;text-align:center;font:11px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;color:#999;-webkit-transition:1s;-moz-transition:1s;transition:1s}
#back-top a:hover{color:#666;}
Если хотите чтобы было слево, то в CSS:
Quote
#back-top{position:fixed;top:30px;left:10px;margin-left:0}
#back-top a{width:80px;padding-top:10px;height:24px;display:block;text-align:center;font:11px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;color:#999;-webkit-transition:1s;-moz-transition:1s;transition:1s}
#back-top a:hover{color:#666;}
Если хотите, чтобы кнопка держалась на экране, то измените код так:
Quote
<div style="position:absolute;position:fixed;up:5;left:475;opacity:1.0;">
<script type="text/javascript">$(document).ready(function(){$("#back-top").hide();$(function (){$(window).scroll(function (){if ($(this).scrollTop() > 100){$('#back-top').fadeIn()}else{$('#back-top').fadeOut()}});$('#back-top a').click(function (){$('body,html').animate({scrollTop:0},800);return false})})});</script>
<p id="back-top">
<a href="#top"> <img src="http://exta.clan.su/skins/top.gif" border="0" align="absmiddle"> Наверх</a>
