Уделять внимание оформлению кнопки особо не будем. Вы можете сделать кнопку в виде направленной наверх стрелки, можете нарисовать ракету и т.д.
Установка
Этот код вставьте в нижнюю часть сайта:
Код
<a class="h-top-link" id="move_up"></a>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) $('a#move_up').fadeIn(200);
else $('a#move_up').fadeOut(400);
});
$('a#move_up').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
В Таблицу стилей (CSS):
Код
.h-top-link, .h-top-link:hover {display:none;cursor:pointer;width:48px;height:48px;text-align:center;background:#1d76d9 url('http://yraaa.ru/_pu/6/36265266.png');color:#fff;position:fixed;right:30px;bottom:30px;}