Главная » (X)HTML, JavaScript, Wordpress, Добавляем на сайт » Кнопка вверх для сайта (jQuery(js), css, html)
Ноя
09

Кнопка вверх для сайта (jQuery(js), css, html)

Заметили ли вы кнопку вверх на моем блоге? Возможно ничего особенного в ней и нет, но вот плавная прокрутка вверх написана на jQuery (новосозданная совсем недавно библиотека на JavaScript), и этим она становится уникальной. Давайте рассмотрим что именно нужно сделать чтобы и на вашем блоге появилась такая замечательная кнопочка.

Первая шаг: html-вставка

Если вы используете CMS WordPress то ее необходимо вставить в файлы index.php и single.php. Также ожете добавить и в шаблон архивов, авторов, поиска. Если самописный сайт, то в те страницы где желаете видеть кнопку вверх. Код который нужно вставить:

<p id="back-top">
<a href="#top"><span></span>Вверх</a>
</p>

Вставить код можно в абсолютно любое место, но пониже на странице, так как кнопка не должна появляться сразу при загрузке страницы, а после малой прокрутки вниз. Если не заметили, посмотрите еще раз :)




Второй шаг: css-стили

Теперь нужно добавить оформление нашей кнопочки, открываете ваш style.css (wordpress) и вставляете туда следующий код.
Если самописный сайт, то вставляете тот же код на страницу с кнопкой, только сверху и снизу нужно добавить тег:

<style>.. Наш css код ..</style>

Копируем:

#back-top {
position: fixed;
bottom: 30px; /* отступ от низа экрана до кнопки */
margin-left: -150px; /* отступ слева экрана до кнопки, если хотите чтобы кнопка была по правый угол экрана поставте параметр margin-left: -1000px; дальше немного подкорректируете сами */
}

#back-top a {
width: 108px; /* размер квадрата изначальный, без округленных углов*/
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}

/* иконка стрелки (тег span) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/*путь к стелочке, можете найти в интернете любую и вставить сюда*/

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

/* округленные углы, радиус, если хотите круг то укажите 60px все три параметра */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

}
#back-top a:hover span {
background-color: #777;
}

Если вас не интересует плавная прокрутка а просто перескок к верху страницы, то мы уже этого достигли. При нажатии сейчас мы будем моментально перемещены вверх.

Третий шаг: Плавная прокрутка вверх (jQuery)

данный код нужно вставить перед закрывающемся тегом head, в файле header.php (wordpress).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

$("#back-top").hide();

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) // количество прокрученных пикселей, после которых начинает отображаться кнопка вверх на сайте.
{
$(‘#back-top’).fadeIn();
} else {
$(‘#back-top’).fadeOut();
}
});

// возвращаемся при клике вверх на 0-й пиксель
$(‘#back-top a’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800); // скорость прокрутки
return false;
});
});

});
</script>

Пока все! Если вам понравился данный пост ставьте лайки и ретвиты, а если нет ищите кнопочку «Мне не нравится». Если есть вопросы по установке — задавайте.

P.S. Раскрутка сайтов самый важный элемент стоящий после самого создания сайта. Перед тем как создавать сайт задумайтесь о том, как и за что вы будете его продвигать.

Подписывайтесь на новые материалы в форме ниже.

Утренний десерт



Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




Подтвердите подписку в письме пришедшем на Почту, после чего начнете получить рассылку.