Вход на сайт
Яндекс.Метрика

Рейтинг@Mail.ru

Еще горстка материалов:

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

Как сделать кнопку наверх на сайте?

Кнопка наверх с помощью jQuery

Рассмотрим как сделать кнопку "НАВЕРХ" для своего сайта.

Кнопку будем реализовывать с помощью библиотеки jQuery.

Код подключения библиотеки jQuery и скрипт событий:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

$(window).scroll(function() {

if($(this).scrollTop() != 0) {

$('#toUp').fadeIn();

} else {

$('#toUp').fadeOut();

}

});

$('#toUp').click(function() {

$('body,html').animate({scrollTop:0},500);

});

});

</script>

Его нужно разместить перед тегом </head> вашего файла шаблона index.php

Придадим красивый внешний вид кнопке. Для этого добавим в файл стилей сайта:

#toUp {

width: 100px;

text-align: center;

padding: 50px;

position: fixed;

bottom: 50px;

right: 0px;

cursor: pointer;

color: #666666;

text-decoration: none;

background-image: url(/images/Upload-icon.png);

background-repeat: no-repeat;

background-size: 90px;

}

Для вызова кнопки в этот же файл index.php перед закрывающимся тегом </body> вставить:

<a id="toUp"></a>

Готово! После обновления страницы сайта кнопка "Наверх" появится в том месте как указано в css стилях (в примере это правый угол), когда вы будете прокручивать страницу вниз.

 

Обновлено 07.04.2016 18:55

unix-way