Для длинных страниц с большим объемом информации давно уже стало стандартом наличие кнопки «Наверх», возвращающей пользователя к самому началу страницы, где обычно находятся все кнопки навигации и меню. Сделать такую кнопку можно по-разному, например ссылкой на элемент вверху страницы. У сервиса Вконтакте с его бесконечными подгружаемыми налету страницами возврат «Наверх» представлен панелью, причем если пользователь желает вернуться к тому месту, где он закончил читать, повторное нажатие на панель перенесет его вниз к точке остановки.
Рассмотрим, как реализовать подобную систему для любого сайта практически на любом движке, поддерживающем шаблоны, а также для обычных статических html-сайтов.
В качестве примера будет рассмотрен WordPress.
Как и для любой динамической фичи, нам понадобится три компонента: html, css и javascript, и одна картинка-спрайт, содержащая стрелочки вверх и вниз.
Скачайте архив и распакуйте его в папку вашей темы.
Подключение и html
Теперь подключим файл стилей и скрипт к теме. Если вы не используете jquery на вашем сайте — подключите и его тоже:
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js" ></script>Подключение css и js:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/up/vk_up_back.css" media="screen" /><script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/up/vk_up_back.js"></script>
Следующий html-код вставим сразу после открывающего тега <body>. В WordPress он находится обычно в header.php
Здесь блок с id topvk — это сама панель, а внутренний блок — это текст, который показывается вверху панели. Он будет изменяться динамически, поэтому для облегчения доступа присвоим и ему id со значением nobr.
<div id="topvk"><div id="nobr">Наверх</div></div>Настройка стиля панели
В самом css нет ничего сложного: ширину панели можно изменять на свой вкус в 7 строке файла стилей, в 17 строке задается ее цвет.
Конструкция rgba(225,231,237,0.1) означает, что панель будет цвета rgb(225,231,237) с непрозрачностью 10%. Соответственно в 21 строке указано, что при наведении непрозрачность увеличивается до 80%.
#topvk{
top:0px;
left:0px;
padding:13px 0 13px;
cursor:pointer;
display:none;
width:100px;
height:100%;
position:fixed;
cursor:pointer;
-webkit-transition-property:background;
-webkit-transition-duration:200ms;
-moz-transition-property:background;
-moz-transition-duration:200ms;
z-index:1000;
background:rgba(225,231,237,0.1);
}
#topvk:hover{
background:rgba(225,231,237,0.8);
}
Отдельного внимания заслуживает следующая конструкция в конце файла стилей:
@media screen and (max-width: 1100px){
#topvk{
width:40px !important;
}
#topvk #nobr, #topvk:hover #nobr{
padding: 0px 35px !important;
margin: 0 31px 0 12px !important;
}
}
Она означает, что если ширина экрана меньше 1100 пикселей, панель станет узкой, чтобы не закрывать содержимое сайта, а надпись будет свободно плавать рядом с ней, не мешая взаимодействию с сайтом.
Немножко динамической магии
Теперь рассмотрим javascript, оживляющий эту панель:
var scrollto = 0;
var prevscroll = 0;
jq = jQuery.noConflict();
jQuery(document).ready(function ($){
jq("#topvk").css('display','none');
});
jq(function(){
jq('#topvk').click(function(){
prevscroll = $(window).scrollTop();
jq('html, body').stop().animate({scrollTop:scrollto},1000, function(){
jq('#topvk #nobr').text('Назад').removeAttr('class').attr('class','back');
scrollto = prevscroll;
});
})
});
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()>100){
jq("#topvk").show();
jq('#topvk #nobr').text('Наверх').removeAttr('class');
scrollto = 0;
}
});Зададим 2 глобальных переменных — куда подскролливать сайт и предыдущее местонахождение пользователя. Скрипт писался еще под старую версию jQuery, а затем jQuery был обновлен, поэтому добавим для совместимости jq = jQuery.noConflict();
Если у вас еще старая версия, переменную jq везде можно заменить на привычный $.
При начальной загрузке панель не показывается. Когда пользователь опускается ниже чем на 100 пикселей от верха страницы, панель показывается с текстом «Наверх» и соответствующей стрелочкой.
Что происходит при клике на панель:
- запоминается позиция пользователя в переменную prevscroll
- страница плавно подскролливается к желаемой позиции (изначально это 0). 1000 — это время, за которое будет совершена анимация. чем меньше, тем быстрее произойдет прокрутка.
- текст на панельке меняется на «Назад», стрелка переворачивается
- позиция scrollto становится равной предыдущему положению на странице.
Таким образом, если пользователь кликнет на панели и вызовет функцию еще раз, страница будет подскроллена к тому месту, где он был ранее, а кнопка опять поменяет текст на «Наверх».
Пример работающего скрипта можно посмотреть на любой странице моего сайта слева.
Отличная у вас кнопка наверх. Пытаюсь сделать себе такую, но не силен в кодах совсем. Можете подсказать?
Я скачал ваш архив, распаковал его в папке своей темы (на ворпресс). Вставил после в header.php, в стилях темы подписал следом два кода: #topvk{ … и @media …
Куда вставить javascript, оживляющий эту панель?
Все ли я правильно делаю? Заранее благодарю, ну уж очень красивая штука и, главное, функциональная!
Внешний файл JavaScript можно подключить в header или footer вашей темы. Проверьте, где у вас подключены другие скрипты, и вставляйте по такому же образцу скрипт из архива.