«

»

Ноя 03 2014

Кнопка «Вверх» для сайта. Настройка и установка

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

Приветствую всех. Рад снова видеть вас на блоге boqdanov.ru.  Тема очередного поста: «Кнопка вверх для сайта». Сейчас на многих сайтах и блогах все больше начинаю замечать установленную кнопку вверх. Так зачем она нужна и как ее установить? Это будут главные вопросы, на которые я попробую ответить.

Какую роль играет кнопка «Вверх» для сайта?

Добавление кнопки «Вверх» на свой сайт — это отличный способ помочь посетителям с  легкостью ориентироваться на странице. Представьте сами, прочитали мы длинный пост на блоге и чтобы вернуться наверх, нужно мучить колесо мышки. Причин для возврата может быть много: перейти по ссылкам, прочитать заново и т.д. Тут мы вспоминаем про кнопку вверх для сайта.

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

Как устанавливается кнопка «Вверх» для сайта на чистом JavaScrip?

Все что нам нужно это специальный скрипт, изображение самой кнопки, вставить необходимый код в файл footer.php нашей темы и прописать стили  в файл style.css. Всего несколько шагов и у вас на сайте появится функциональная кнопка «Вверх». Приступим.

Создаем скрипт.

Для начала, открываем текстовый редактор (я использую для этих целей NotePad++, классная штука), создаем новый документ и вставляем следующий код:

/**
 * Скрипт Скроллинга: кнопка наверх
 * css class кнопки: scrollTop
 */

window.top = {};
var sc = window.top;

sc.time = 12; // время прокручивания

sc.goTop = function (time, acceleration) {
 acceleration = acceleration || 0.1;
 time = time || sc.time;

 var dx = 0;
 var dy = 0;
 var bx = 0;
 var by = 0;
 var wx = 0;
 var wy = 0;

 if (document.documentElement) {
 dx = document.documentElement.scrollLeft || 0;
 dy = document.documentElement.scrollTop || 0;
 }
 if (document.body) {
 bx = document.body.scrollLeft || 0;
 by = document.body.scrollTop || 0;
 }
 var wx = window.scrollX || 0;
 var wy = window.scrollY || 0;

 var x = Math.max(wx, Math.max(bx, dx));
 var y = Math.max(wy, Math.max(by, dy));

 var speed = 1 + acceleration;
 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 if(x > 0 || y > 0) {
 var invokeFunction = "window.top.goTop("+ time +")"
 window.setTimeout(invokeFunction, time);
 }
 return false;
}

sc.showHide = function (){
 var a = document.getElementById('gotop');

 if( ! a ){
 // если нет элемента добавляем его
 var a = document.createElement('a');
 a.id = "gotop";
 a.className = "scrollTop";
 a.href = "#";
 a.style.display = "none";
 a.style.position = "fixed";
 a.style.zIndex = "9999";
 a.onclick = function(e){ e.preventDefault(); window.top.goTop(); }
 document.body.appendChild(a);
 }

 var stop = (document.body.scrollTop || document.documentElement.scrollTop);
 if( stop > 300 ){
 a.style.display = 'block';
 sc.smoothopaque(a, 'show', 30, false);
 } else {
 sc.smoothopaque(a, 'hide', 30, function(){a.style.display = 'none';});
 }

 return false;
}

// Плавная смена прозрачности
sc.smoothopaque = function (el, todo, speed, endFunc){
 var
 startop = Math.round( el.style.opacity * 100 ),
 op = startop,
 endop = (todo == 'show') ? 100 : 0;

 clearTimeout( window['top'].timeout );

 window['top'].timeout = setTimeout(slowopacity, 30);

 function slowopacity(){
 if( startop < endop ){
 op += 5;
 if( op < endop )
 window['top'].timeout = setTimeout(slowopacity, speed);
 else
 (endFunc) && endFunc();
 }
 else {
 op -= 5;
 if( op > endop ){
 window['top'].timeout = setTimeout(slowopacity, speed);
 }
 else
 (endFunc) && endFunc();
 }

 // установка opacity
 el.style.opacity = (op/100);
 el.style.filter = 'alpha(opacity=' + op + ')';
 }
}
if (window.addEventListener){
 window.addEventListener("scroll", sc.showHide, false);
 window.addEventListener("load", sc.showHide, false);
}
else if (window.attachEvent){
 window.attachEvent("onscroll", sc.showHide);
 window.attachEvent("onload", sc.showHide);
}

После этого, нужно обозвать и сохранить данный документ в формате js(например Top.js).

Подготавливаем картинку кнопки «Вверх» с помощью программы фотошоп.

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

и немного доработал ее с помощью программы фотошоп. Если что-то не понятно, смотрим на скриншот.

Открываем программу и добавляем выбранную картинку. Создаем в рабочей области новое изображение с размером 110px на 110px. Далее переносим нашу картинку на новое изображение. Кнопку вверх для сайтаПосле этого нам необходимо сделать ее немного прозрачной. Для этого выделяем нужный слой, идем в непрозрачность и уменьшаем процент. Как установить кнопку вверх для сайтаПосле этого возвращаемся к нашей исходной картинке и снова переносим  ее на новое изображение, располагая чуть ниже. Обязательно проследите, чтобы оба изображения располагались строго вертикально друг над  другом. Установить кнопку вверх для сайтаДалее удалим ненужную часть. Для этого выбираем параметр «Обрезка», выделяем строго одно изображение и нажимаем клавишу «Enter».как установить кнопку вверх для сайта

Далее объединяем видимые слои,кнопка вверх обзываем (например vverh)  и сохраняем изображение на компьютере в формате PNG.кнопка Забыл сказать, перед сохранением посмотрите размер полученного изображения, запишите или запомните его. кнопка для сайта Кнопка вверх для сайта у нас готова.

Устанавливаем  кнопку.

Приступим к установке кнопки на сайт.  Перед внесением изменений сделайте резервную копию необходимых файлов. Полученные файлы нам необходимо закачать на сервер. Для этих целей я использую программу FileZilla.  Файл с нашим изображением нужно добавить на хостинг в папку images нашей темы. Полный путь: http:// сайт/wp-content/themes/ тема/images/vverh.png. кнопка для сайта Файл нашего скрипта копируем в папку js нашей темы. Полный путь: http:// сайт /wp-content/themes/ тема /js/Top.jsкнопка вверх

С этим тоже закончили.

Редактирование файла footer.php.

После этого идем в административную панель WordPress и следуем  по пути: «внешний вид – редактор — открываем для редактирования файл footer.php.

Необходимо перед закрывающимся тегом </body> добавить следующий код. Обязательно внесите свои данные в код и обновите файл.

<script type="text/javascript" src="http://название сайта/wp-content/themes/название темы/js/Top.js"></script>

Теперь остается только добавить стили кнопки «Вверх» для сайта. Для этого в папке нашей темы открываем файл style.css и добавляем в самом конце следующий код:

.scrollTop{
 background:url('images/vverh.png') 0 0 no-repeat;
 width:36px;
 height:55px;
 bottom:5px;
 left:89%;
}
.scrollTop:hover{  background-position:100% 100%; }

Здесь тоже необходимо внести кое-какие изменения. Помните, я говорил, чтобы вы посмотрели и записали исходные параметры изображения нашей кнопки  (в моем случае это 36px на 110px ).  Так вот прописываем ширину(width) 36px (вы свою) и высоту (height), ровно половина от основной высоты(55px). Остальные параметры я не трогал. Сохраняем и обновляем. Идем на сайт и любуемся как выглядит и работает кнопка «Вверх». Все должно отлично работать.

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

Скачиваем следующий [urlspan]архив[/urlspan]. В нем находятся два файла. Файл скрипта и изображение кнопки. Разархивируйте его себе на компьютер. С помощью программы FileZilla, соединяемся со своим хостингом. Файл Top.js необходимо поместить в папку  wp-includes/js (папка самого движка WordPress). Файл кнопки vverh.png редактируем,  как указано в первом варианте. Сохраняем в формате png.  Создаем в корне нашего сайта папку и называем ее img, в той же директории где расположена  папка wp-includes . Далее с помощью FTP- клиента закачиваем изображение в эту папку. Вот такой путь имеет изображение после добавления:

http://Ваш сайт/img/vverh.png

Находясь в административной панели, идем по пути: внешний вид- редактор. Открываем для редактирования файл header.php находим тег </head> и вставляем перед ним следующий код

<script type="text/javascript" src="http://Ваш сайт/wp-includes/js/Top.js"></script>

и сохраняем изменения. Не забываем исправлять адрес сайта на свой. Пример:

<script type="text/javascript" src="http://boqdanov.ru/wp-includes/js/Top.js"></script>

Далее открываем для редактирования файл footer.php находим тег </body> и перед ним вставляем следующий код:

<a class="scrollTop" id="gotop" onclick="top.goTop(); return false;" href="#"></a>

Сохраняем файл.

Теперь нам необходимо указать стили для нашей кнопки. Открываем файл style.css нашего шаблона и в самом конце указываем

.scrollTop{
background:url(http://Ваш сайт/img/vverh.png) 0 0 no-repeat;
display:block;
width:50px;
height:50px;
position:fixed;
bottom:10px;
left:95%;
z-index:2000;
}
.scrollTop:hover{
background-position:100% 100%;
}

Указываем адрес сайта и сохраняем изменения. Если хотите, можете поиграться с основными настройками, как и в первом варианте.

Теперь мы знаем, как устанавливается кнопка «Вверх» для сайта. На этом буду заканчивать. Немного рисованного видео(делал на скорую руку) про скрипт «БаннерБро». Удачи в делах!

С уважением, Богданов Антон!

 

Интересные материалы по теме: