«

»

Ноя 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%;
}

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

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

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

 

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

17 комментариев

Перейти полю для комментария

  1. Подъященко+Виктор

    Напишу не по теме статьи вопрос. Помню ты писал что стараешься плагины заменять скриптами. А скрипты сам ищешь в интернете и заменяешь??

    1. Антон Богданов

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

  2. Подъященко Виктор

    Тоже задумался потихоньку плагины заменить кодами. Но где брать эти коды не знаю...

    1. Антон Богданов

      Ты не поверишь Виктор — в интернете. В сети можно найти все. Могу помочь в поисках.

  3. Екатерина Худякова

    Хорошая статья, и кнопка эта очень нужная))) Правда я на своем блоге все еще ее не установила))) В планах есть, а время пока другие задачи отнимают(((...

    1. Антон Богданов

      Спасибо Екатерина. Я сам ее не сразу поставил. Когда самому надоело постоянно скролить вверх, тогда и внедрил ее. И в первую очередь думал о своих посетителях, что их тоже напрягает постоянно мучить колёсико мыши. Так что обязательно устанавливай эту кнопочку. Удачи в делах!

  4. Николай+Кудрявцев

    Привет, не получилось данным способом, реализовать кнопочку, а жаль) вроде всё по инструкции делал...

    1. Антон Богданов

      Привет, Николай. Очень странно, я ставил эту кнопку и параллельно писал статью. А кэш удалял?

  5. Николай+Кудрявцев

    Да удалял, я не в фотошопе картинку делал. В Пайнт.нет, слоями, вряд ли от этого зависит.

    1. Антон Богданов

      Сейчас только глянул на твой блог. Кнопка у тебя выводится и отлично работает. Сейчас только проверил. Только прозрачная она.

    2. Антон Богданов

      Николай, попробуй полный путь в стилях прописать: pc-polzovatel.ru/wp-content/themes/название темы/images/vverh.png

  6. Николай Кудрявцев

    Это кнопка плагина, вот хотел от неё избавиться и твой способ опробовать...

    1. Антон Богданов

      Может не подходит такой вариант. Сейчас дополню статью. Подключение кнопки вверх на уровне WordPress.

    2. Антон Богданов

      Дополнил статью, Николай. Второй вариант точно подойдет. Удачи в делах!

  7. Николай Кудрявцев

    Спасибо! Сейчас попробую. Отпишусь о результатах.

  8. Николай+Кудрявцев

    Нет Антох, всё тщетно. Не хочет показываться кнопка, может с темой что не то... Или с хостером.

    1. Антон Богданов

      Даже не знаю в чем может быть дело.

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: