Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Оригинальная кнопка вверх-вниз для сайта

Всем привет! Вы видели на моем сайте кнопку вверх, которая позволяет плавно прокрутить страницу. Наверное вы поставили такую же кнопку на свой сайт, если читали мою статью про то, как это сделать.

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

кнопка вверх, кнопка вниз, кнопка вверх вниз

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

Кнопка вверх-вниз позволяет посетителю вашего сайта экономить время при просмотре и тем самым повышает желание оставаться на сайте дольше обычного, что непосредственно влияет на поведенческий фактор.

Если на вашем сайте располагаются объемные статьи или вы собираетесь такие писать, то данная кнопка просто должна быть установлена. Ну что, решили поставить? Тогда поехали!

Скрипт кнопки вверх-вниз

Данный скрипт не мой, а взят из буржунета и изрядно переработан для того, чтобы он мог нормально работать на CMS WordPress и корректно отображался во всех браузерах.

Приступим к установке? Прежде всего вам необходимо подключить к своему сайту библиотеку jQuery или проверить на уже существующее подключение в файлах header.php и footer.php. Если не знаете как это сделать, то читайте в моей статье тут.

Найдите в шаблоне своего сайта папку «js» или создайте ее, если она отсутствует. Если папка существует, то в ней должны находиться файлы с одноименным расширением-«название файла.js».

Вам нужно создать новый файл с расширением .js и вставить в него приведенный ниже код:

var butup_arrows_my=100;
var butup_tytime_arrows=5;
var post_butup_go,stopwatch;
function butup_lop_arrows()
{
stopwatch=setInterval(«butup_scroll()»,30);
}
function butuphendr()
{
clearInterval(stopwatch);
}
function butup_scroll()
{
post_butup_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0,++post_butup_go);
}

function butup_the_highest_point()
{
try{
if(window.pageYOffset!=undefined)
return window.pageYOffset;
return window.document.body.scrollTop;
}catch(err)
{
try{
return window.document.body.scrollTop;
}catch(err2)
{
return 0;
}
}
}
function butup_scroll_to_top()
{
var butup_copy_zoo=window.document.body;
var butup_brake_by=butup_the_highest_point();
window.scrollBy (0,-butup_arrows_my);
var butup_brake_stop=butup_the_highest_point();
if(butup_brake_by>butup_brake_stop)
setTimeout(«butup_scroll_to_top()»,butup_tytime_arrows);
else
document.getElementById(«butup_down_img»).style.display=»block»;
return false;
}

function butup_down_arrow()
{
var butup_copy_zoo=window.document.body;
var butup_brake_by=butup_the_highest_point();
window.scrollBy (0,butup_arrows_my);
var butup_brake_stop=butup_the_highest_point();
if(butup_brake_by<butup_brake_stop)
setTimeout(«butup_down_arrow()»,butup_tytime_arrows);
else
document.getElementById(«butup_down_img»).style.display=»none»;
return false;
}

function slow_butup_scroll()
{
var seo_butup_body=window.document.body;
var butup_height=seo_butup_body.scrollHeight;
var butup_top=butup_the_highest_point();

if(butup_top==0)
document.getElementById(«butup_up_img»).style.display=»none»;
else
document.getElementById(«butup_up_img»).style.display=»block»;
return false;
}
setInterval(«slow_butup_scroll()»,100);
document.write(‘<div class=»arrow»> <a href=»#» onclick=»return butup_scroll_to_top()»><img border=»0″ id=»butup_up_img» width=»40px» src=»http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png» title=»Наверх»></a><br /> <a href=»#» onclick=»butuphendr();return false;»><img border=»0″ id=»butup_up_img» width=»40px» src=»http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png» title=»Пауза»></a><br /><a href=»#» onclick=»clearInterval(stopwatch);butup_lop_arrows();return false;»><img border=»0″ id=»butup_up_img» width=»40px» src=»http://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png» title=»Читать»></a><br /> <a href=»#» onclick=»return butup_down_arrow()»><img border=»0″ width=»40px» id=»butup_down_img» src=»http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png» title=»Вниз»></a></div>’);

Создать такой файл можно в любом текстовом редакторе, например Notepad++. Создаете новый файл, вставляете в него приведенный код и сохраняете с расширением «.js». Файл может иметь любое название, но главное оно должно состоять из английских символов.

В скрипте используются картинки кнопок для отображения на сайте. Вы можете создать свои картинки при помощи фотошопа и закачать их на сервер в папку «images», которая расположена в папке с вашей темой. В этом случае необходимо заменить URL-адреса картинок в коде, которые прописаны в последней строчке кода, к примеру URL-адрес картинки со стрелкой «Вниз» имеет следующий вид:

src=»http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png»

Картинки расположены в очередности сверху вниз: адрес первой- стрелка наверх, вторая пауза и т.д.

кнопка вверх, кнопка вниз, кнопка вверх вниз

После создания файла и расположения его в папке нужно произвести подключение к шаблону вашего сайта. Для этого вам нужно вставить код подключения в файл шаблона. Подключение ничем не отличается от подключения библиотеки jQuery или любого скрипта. Вот вам два варианта кода:

Вариант №1:

<script  type=»text/javascript» src=»http://Ваш домен/wp-content/themes/Название темы/js/Название файла.js»></script>

Вариант №2:

<script  type=»text/javascript» src=»<?php bloginfo(‘template_url’); ?>/js/Название файла.js»></script>

Подключение скрипта лучше сделать в файле footer.php, вставив один из приведенных кодов после закрывающегося тега </body>

Скрипт подключили и теперь нужно задать стили для кнопок. Для этого откройте файл style.css своей темы и в самый конец вставьте следующий код:

/*стили для кнопок вверх/вниз*/
.arrow {
position: fixed;
width: 64px;
right: -10px;
bottom: 115px;
z-index: 10;
}
.arrow img {
opacity: 0.3;
}
.arrow img:hover{
cursor: pointer;
opacity: 1;
filter: alpha(opacity=100);
}

Вот и все. Если вы сделали все правильно, то блок кнопок будет работать, в противном случае проверьте все последовательно и убедитесь, что не допустили ошибок.

Установка данного скрипта не составит особого труда, если вы хоть немного знакомы с принципами HTML и CSS, а вот у новичков могут возникнуть вопросы, на которые я с удовольствием отвечу в комментариях. Да, и чтобы получать мои новые статьи, не забудьте подписаться на мой блог. Все подписчики в случае затруднения по какому-нибудь вопросу всегда смогут обратиться ко мне за помощью.

На этом все. Воспользуйтесь данным скриптом и на вашем сайте будет красоваться удобная и функциональная кнопка вверх-вниз, а посетители и пользователи вашего ресурса оценят данное новшество.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

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

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

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

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ