Кнопка to-top «Вверх»

Кнопка to-top «Вверх»

Удобная вещь кнопка «Вверх» для сайта. Сейчас я ее себе поставлю))

Вы можете использовать эту фишку на любом сайте, т.к. она не требует особых методов установки. Вы просто добавляете нужный код в нужное место и делов…

Нам нужен код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>
<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Если используется wordpress, этот код рекомендуют ставить в файл footer.php вашего шаблона. Я же его размещу в файле header.php до тега </head>

Теперь осталось подключить стили для кнопки. Записываем следующий код в файл style.php

.b-top {
z-index: 2600;
position: fixed;
left: 0;
bottom: 90px;
width: 34%;
margin-left: 50%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {
z-index: 2600;
position: absolute;
display: block;
left: 56px;
bottom: 0;
margin: 0 0 0 100%;
padding: 32px 12px 4px;
color: white;
background: #261d15 url(/wp-content/themes/Ваша тема/images/b-j-top.png) no-repeat 50% 11px;
border-radius: 7px;
}

Кнопка готова!

Опубликовано:31.01.2014inkognitod

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *