Часто возникает ситуация, когда на одной странице содержится довольно много текста и рисунков, и после прочтения статьи довольно проблематично вернуться в самый верх сайта. Ведь делать это прокруткой колесика вверх или с помощью бегунка не всегда удобно, особенно если вы на мобильном устройстве. Давайте сделаем жизнь посетителям нашего сайта немного комфортнее. Добавим кнопку с помощью которой вернуться наверх можно одним нажатием. Причем появляться эта кнопка должна по мере прокрутки сайта вниз, чтобы не засорять страницу лишней информацией.
Установить кнопку вверх можно несколькими способами, мало того, существует много вариантов прокрутки. Плавная, быстрая, верх и вниз, но самая оптимальная – плавная, выполняет свою работу и приятный дает эффект. Устанавливать будем с помощью скрипта, без использования плагина, лишний вес не к чему. Тем более сложного ничего нет и времени займет пару минут, вставить код и добавить стили, проще простого.
Установка.
В первую очередь подключим библиотеку jQuery, если вы ранее ее подключали, то снова это делать не нужно. Открываем файл header.php, он находится внутри вашей темы, и добавляем между тегами <head> </head> следующий код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Теперь нужно открыть файл footer.php, также находится вашей теме и внизу перед тегом </body> добавить скрипт.
<script type="text/javascript">
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
else $(scrollDiv).fadeIn("slow")
});
$(this).click(function() {
$("html, body").animate({scrollTop: 0}, "slow")
})
}
});
$(function() {
$("#gotop").scrollToTop();
});
</script>
Не спишите закрывать этот файл, нам нужно еще вставить код для вывода кнопки вверх, можно вставить прям перед скриптом, который добавили ранее.
<a id="gotop" href="#"></a>
Библиотеку подключили, вывод кнопки вверх сделали, давай добавим стили. Откройте файл style.css и в конце вставляем следующий код:
#gotop{
background:url(images/gotop.png) no-repeat;
z-index: 9999;
opacity: 0.5;
width: 90px;
height: 90px;
display: block;
position: fixed;
cursor: pointer;
right: 15px;
bottom: 7px;
float:right;
}
#gotop:hover{
opacity: 0.9;
}
В третей строке указано изображение кнопки вверх «gotop.png» поэтому добавьте какую-нибудь картинку или можете скачать варианты ниже в PSD формате.
А где папка images должна быть?
Создал в корневом, а стрелка не отображается.
Вот указан путь картинки (стрелка):
background:url(images/gotop.png) no-repeat;Поместите стрелку в папку «images», которая находится в вашей теме с именем gotop в формате png.
Почему у меня картинка на главной страницы из-за скрипта пропала? С плагинами конфликтует?
Что за картинка и какой плагин?
Всё разобрался — в папку images установленной темы wordpress.
Подскажите пж. А как сделать, чтобы при нажатии не так быстро поднимала вверх? И ещё хотелось бы чтоб кнопка появилось медленно при спускания страницы вниз. Спасибо.
Вроде и так не плохо, но... Там скорость подъема зависит от расстояния шапки, чем дальше от нее тем быстрее скорость. Если нужно изменить, то замените нижнею строку на эту
$("html, body").animate({scrollTop: 0}, 5000)(меняйте число 5000 на свое усмотрение).Эта строка
if ($(window).scrollTop() <= "900") $(scrollDiv).fadeOut("slow")отвечает за расстояние появления кнопки (900px)...