Кнопка «Наверх» для сайта на jQuery

Сегодня существует множество сайтов, на которых установлена кнопка "наверх". Назначение таких кнопок очевидно из названия — переход к началу страницы. Наличие подобных кнопок на сайте делает не только просмотр контента более удобным, но и привлекает посетителя. Вот я и решил установить себе такую. Кнопка "Наверх" для сайта на jQuery (Полезно, Сайт, Установка) 

Простейшую кнопку можно сделать, используя только HTML, путем установки якоря. Такой способ я даже не стал рассматривать, так как, по-моему, смотрится это не очень. Ведь так? Я хотел, чтобы переход осуществлялся плавно, а не скачком. К тому же, мне хотелось не просто кнопку, а целую полосу (блок), находящийся с одной стороны страницы и занимающий всю ее высоту.

Потратив достаточно времени на поиски желаемого, я все-таки смог найти ту самую, которая удовлетворяла всем моим требованиям. Нашел я ее на сайте truemisha.ru, описание которой было вот в этой статье. Оценить эту кнопку можно на этой странице.  А сейчас я предлагаю рассмотреть о том, как она устанавливается.

Установка кнопки

Первым делом необходимо скачать архив с исходниками. В архиве находится три файла:

  1. top-button-jquery.html — пример страницы с кнопкой
  2. layout.css — файл со стилями
  3. button.js — файл с функциями для работы кнопки

P.S. Лично я содержимое файла layout.css не использовал. Все, что там было написано, я удалил и прописал свои стили.

Затем вставляем следующий HTML код перед закрывающимся тегом </body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button.js"></script>
<div id="top-link">
<a href="#top">наверх</a>
</div>

Обращаю внимание, что нужно указать правильный путь к файлу button.js в строке

<script src="button.js"></script>

Если не получается указать правильный путь, и Ваш сайт стоит на WordPress, можно облегчить себе задачу, поместив button.js в папку с текущей темой и вызвав функцию получения директории.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri() ?>/button.js"></script>
<div id="top-link">
<a href="#top">наверх</a>
</div>

Далее будем украшать кнопку средствами css. Так как каждый сайт имеет свой стиль, то тут нельзя точно сказать, что подойдет именно Вам. Могу только показать коды css исходников и те, которые я использую на моем сайте.

Исходный css код

#top-link{
cursor:pointer; /* изменяем указатель мыши при наведении на блок */
display:none; /* скрываем блок с кнопкой, т.к. отображать надо только при прокрутке */
position:fixed; /* фиксируем расположение */
left:0px;
top:0px;
padding:0;
}
#top-link a{
display:block;
}

Мой css код

#top-link {
cursor: pointer;
display: none;
position: fixed;
left: 0px;
top: 0px;
padding: 0;
z-index: 1;
}
#top-link:hover {
background: #ccc;
opacity: 0.5;
}
#top-link a {
display: block;
width: 100px;
background: url(./UpArrow.png) no-repeat 50% 50%;	/*Стрелка, расположенная по центру*/
padding: 5px 0;
margin: 5px;
margin-top: 10px;
text-decoration: none !important;
opacity: 0.5;
}
#top-link:hover a {
opacity: 1;
}

Если Вы все сделали правильно, можете наслаждаться результатом, если же что-нибудь не получается, можете задать вопрос в комментариях под этой статьей или же здесь. А на этом все. Удачи Вам!

4 отзыва на “Кнопка «Наверх» для сайта на jQuery

  1. Mike_Device

    Спасибо, что обратили внимание, но у меня все нормально, даже в Opera. Выкладываю скрин. Так что, думаю, проблема в Вашем браузере.

  2. Mike_Device

    Согласен. К примеру, я скачал его сразу после того, как увидел этот комментарий.

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

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