Приветствую Вас дорогие друзья. Сегодня речь пойдет о небольшом скрипте, который сейчас используют на большинстве сайтов и вы наверняка с ним сталкивались. С помощью этого скрипта, Ваши посетители смогут плавно подняться наверх страницы вашего сайта.
Данная кнопка появляется только тогда, когда человек прокрутил страницу немного вниз.
Вставляем следующий CSS код:
HTML
.h-top-link, .h-top-link:hover {display:none;cursor:pointer;width:48px;height:48px;text-align:center;background:#1d76d9 url('http://hotff.ru/uploads/ipbsu/forum/post-1-1486024205.png');color:#fff;position:fixed;right:30px;bottom:30px;}
АЦ - Настройка скинов - Перед выбраным скином нажимаем HTML - Редактирование шапки форума
В самый низ вставляем:
Код
<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>
<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>
Пример можете увидеть на нашем http://hotff.ru.