Вы наверное заметили, что на моём сайте появились кнопка верх и кнопка вниз для быстрой прокрутки страницы, а также кнопочка для чтения и пауза. И сегодня я хочу Вам предложить установить скрипт с такими кнопками, который написал Виталий Кириллов специально для сайта на WordPress.
Далее повествование от имени автора.
Я уже давно хотел реализовать на блоге что-то подобное, так как пишу довольно объемные посты, для прочтения которых приходиться прокручивать несколько экранов, что согласитесь, парой начинает нервировать.
Катастрофически не хватает времени! Писать статьи и то приходиться по ночам, отнимая время от сна, не говоря уже про всякие работы по блогу, которые постоянно откладываются на свободный денек.
Если Вы пишите объемные статьи и у Вас до сих пор не установлены кнопки вверх вниз, то мой сегодняшний пост специально для Вас. Поехали!
Скрипт блока кнопок вверх и вниз
Идею сего скрипта я взял с буржуйского сегмента интернета и мне пришлось изрядно повозится, чтобы скрипт нормально работал на CMS WordPress, а результат корректно отображался во всех браузерах.
Для веб-мастеров с базовым знанием HTML, и CSS не составит труда установить скрипт кнопок на свой сайт, а вот на счет новичков я не так уверен и ожидаю массу вопросов в комментариях.
Конечно я постараюсь всем помочь советом, а подписчикам блога помогу еще и делом, если будет такая необходимость.
Конечно, я физически не смогу решать все вопросы, так как обращений уже приходит довольно много и поэтому я буду выбирать самые экстренные и тяжелые случаи, где моя помощь будет действительна необходима.
Итак, для начала нам потребуется подключить к сайту библиотеку jQuery, как это делается читайте тут. Обязательно проверьте, файлы header.php и footer.php, возможно библиотека jQuery у Вас уже подключена, в таком случаи повторно подключать ее не надо.
Далее, ищем в шаблоне папку с названием «js». Если такой нет, то надо будет ее создать, но об этом немного позже. Если такая папка есть, то в ней должны находиться файлы с расширением «.js «.
Создаем новый файл с расширением .js и вставляем в него следующий код:
var mayak_arrows_my=100;
var mayak_tytime_arrows=5;
var post_mayak_go,stopwatch;
function mayak_lop_arrows ()
{
stopwatch=setInterval («mayak_scroll ()»,30);
}
function mayakhendr ()
{
clearInterval (stopwatch);
}
function mayak_scroll ()
{
post_mayak_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo (0,++post_mayak_go);
}
function mayak_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 mayak_scroll_to_top ()
{
var mayak_copy_zoo=window.document.body;
var mayak_brake_by=mayak_the_highest_point ();
window.scrollBy (0, -mayak_arrows_my);
var mayak_brake_stop=mayak_the_highest_point ();
if (mayak_brake_by>mayak_brake_stop)
setTimeout («mayak_scroll_to_top ()»,mayak_tytime_arrows);
else
document.getElementById («mayak_down_img»).style.display="block";
return false;
}
function mayak_down_arrow ()
{
var mayak_copy_zoo=window.document.body;
var mayak_brake_by=mayak_the_highest_point ();
window.scrollBy (0,mayak_arrows_my);
var mayak_brake_stop=mayak_the_highest_point ();
if (mayak_brake_by<mayak_brake_stop)
setTimeout («mayak_down_arrow ()»,mayak_tytime_arrows);
else
document.getElementById («mayak_down_img»).style.display="none";
return false;
}
function slow_mayak_scroll ()
{
var seo_mayak_body=window.document.body;
var mayak_height=seo_mayak_body.scrollHeight;
var mayak_top=mayak_the_highest_point ();
if (mayak_top==0)
document.getElementById («mayak_up_img»).style.display="none";
else
document.getElementById («mayak_up_img»).style.display="block";
return false;
}
setInterval («slow_mayak_scroll ()»,100);
document.write ('<div class="arrow"> <a href="#" onclick="return mayak_scroll_to_top ()"><img border="0" id="mayak_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="mayakhendr ();return false;"><img border="0" id="mayak_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);mayak_lop_arrows ();return false;"><img border="0" id="mayak_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 mayak_down_arrow ()"><img border="0" width="40px" id="mayak_down_img" src="http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png" title="Вниз"></a></div>');
Если синий цвет картинок Вам не подходит, зовите в помощь фотошоп и создавайте картинки стрелок на свой вкус, благо сложного в этом ничего нет.
Свои картинки надо закачать на сервер в папку «images», которая также расположена в папке с Вашей темой, а затем заменить URL картинок в коде.
Адреса картинок прописаны на самой последней строчке кода, вот URL картинки
со стрелкой «Наверх»:
http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png
Пауза:
http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png
Читать:
http://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png
Стрелка «Вниз»
http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png
Очередность картинок сверху вниз, т.е. первый адрес — стрелка наверх, второй — пауза и т.д.
Далее, открываем файл 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);
}
Вот в принципе и все, блок кнопок должен работать.
Как создать файл с расширением «.js»
Давайте прежде всего разберемся, почему у файла должно быть такое расширение. Дело в том, что в файлах с таким расширением, расположены коды, написанные на языке JavaScript. Отсюда и расширение файла «.js».
Создать такой файл можно в бесплатном текстовом редакторе Notepad++, просто сохранив вновь созданный файл в вышеупомянутом расширении:
Название у файла может быть любым, главное чтобы оно состояло из английский символов.
Итак, мы создали папку с названием «js» и файл с расширением «.js», а также скопировали в него код кнопок, но этого недостаточно, надо еще подключить файл к шаблону.
Подключаем файл с расширением «.js» к шаблону WopdPress
На самом деле ничего сложного нет в подключении к шаблону файла «.js» и в принципе сие действие ничем не отличается от подключения библиотеки jQuery или любого другого скрипта. Например:
Вариант №1:
<script type="text/javascript" src="<?php bloginfo ('template_url'); ?>/js/Название файла.js"></script>
Вариант №2:
<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Название темы/js/Название файла.js"></script>
Чтобы не замедлять загрузку страниц, подключать скрипты лучше в файле footer.php, вставляя код после закрывающего тега:
</body>
Все просто! Но вспоминая себя несколько лет назад, я понимаю, что у новичков будут сложности.
На сегодня у меня все.
Источник
Кнопка вверх вниз. Вариант Мориса Таирова
На блогах, где часто пишутся объёмные тексты, появляется необходимость в быстрой прокрутке страницы в её конец либо начало. Чтобы облегчить для пользователя прокрутку, используются скрипты быстрой прокрутки страницы вверх и вниз. Как вы можете видеть у меня на блоге тоже есть кнопки вверх вниз.
На большинстве блогов как правило установлена только кнопка наверх, но на мой взгляд кнопка вниз также необходима. Ведь иногда, на страницу, вы заглядываете, чтобы проверить появились ли новые комментарии. А комментарии, как правило, расположены в самом низу страницы и кнопка вниз поможет быстренько прокрутить страницу вниз.
Помимо кнопкок вверх вниз у меня есть кнопки Читать и Пауза. Кнопка читать медленно прокручивает страницу вниз. Скорость этой прокрутки можно регулировать в скрипте. Кнопка Пауза останавливает режим чтения.
Кнопка вверх вниз. Установка.
Для кнопки вверх вниз я использовал следующий javascript:
[cc lang=»javascript»]
var moris_arrows_my=100;
var moris_tytime_arrows=20; //скорость прокрутки; чем выше число тем медленнее
var post_moris_go,stopwatch;
function moris_lop_arrows()
{
stopwatch=setInterval(«moris_scroll()»,50); //скорость прокрутки при чтении; чем выше число тем медленнее
}
function morishendr()
{
clearInterval(stopwatch);
}
function moris_scroll()
{
post_moris_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0,++post_moris_go);
}
function moris_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 moris_scroll_to_top()
{
var moris_copy_zoo=window.document.body;
var moris_brake_by=moris_the_highest_point();
window.scrollBy (0,-moris_arrows_my);
var moris_brake_stop=moris_the_highest_point();
if(moris_brake_by>moris_brake_stop)
setTimeout(«moris_scroll_to_top()»,moris_tytime_arrows);
else
document.getElementById(«moris_down_img»).style.display=»block»;
return false;
}
function moris_down_arrow()
{
var moris_copy_zoo=window.document.body;
var moris_brake_by=moris_the_highest_point();
window.scrollBy (0,moris_arrows_my);
var moris_brake_stop=moris_the_highest_point();
if(moris_brake_by<moris_brake_stop)
setTimeout(«moris_down_arrow()»,moris_tytime_arrows);
else
document.getElementById(«moris_down_img»).style.display=»none»;
return false;
}
function slow_moris_scroll()
{
var tmoris_body=window.document.body;
var moris_height=tmoris_body.scrollHeight;
var moris_top=moris_the_highest_point();
if(moris_top==0)
document.getElementById(«moris_up_img»).style.display=»none»;
else
document.getElementById(«moris_up_img»).style.display=»block»;
return false;
}
setInterval(«slow_moris_scroll()»,100);
document.write(‘
‘);
[/cc]
Сохраните этот код с помощью Notepad++ в формате .js.
Далее залейте его на хостинг, например в папку /wp-content/js/ и подключите его.
Для подключения скрипта в footer.php после функции wp_footer (); перед закрывающим тегом </body> добавляем следующий код:
[cc lang=»html»]
[/cc]
Далее сохраняем файл footer.php и заливаем его обратно на хостинг.
Теперь осталось добавить CSS стили в файл style.css
[cc lang=»css»]
/*——стили для кнопок вверх/вниз——*/
.arrow {
position: fixed;
width: 64px;
right: -10px;
bottom: 115px;
z-index: 10;
}
#moris_up_img {
margin-bottom: -14px;
}
.arrow img {
opacity: 0.6; /*степень прозрачности кнопок до наведения курсора*/
}
.arrow img:hover{
cursor: pointer;
opacity: 1;
filter: alpha(opacity=100);
}
[/cc]
Теперь осталось только залить картинки кнопок на хостинг и в самом скрипте поменять путь к этим картинкам. Картинок должно быть 4 с названиями UP, DOWN, PAUSE, READ. Ниже есть ссылка для скачивания скрипта со всеми необходимыми файлами.
Облегченная версия скрипта для кнопки вверх вниз.
Для тех кто хочет убрать лишние кнопки из этого скрипта и оставить только кнопки наверх и вниз предлагаю облегченный вид скрипта.
[cc lang=»javascript»]
var moris_arrows_my=100;
var moris_tytime_arrows=35;
var post_moris_go,stopwatch;
function moris_scroll ()
{
post_moris_go = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo (0,++post_moris_go);
}
function moris_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 moris_scroll_to_top ()
{
var moris_copy_zoo=window.document.body;
var moris_brake_by=moris_the_highest_point ();
window.scrollBy (0, -moris_arrows_my);
var moris_brake_stop=moris_the_highest_point ();
if (moris_brake_by>moris_brake_stop)
setTimeout («moris_scroll_to_top ()»,moris_tytime_arrows);
else
document.getElementById («moris_down_img»).style.display=»block»;
return false;
}
function moris_down_arrow ()
{
var moris_copy_zoo=window.document.body;
var moris_brake_by=moris_the_highest_point ();
window.scrollBy (0,moris_arrows_my);
var moris_brake_stop=moris_the_highest_point ();
if (moris_brake_by<moris_brake_stop)
setTimeout («moris_down_arrow ()»,moris_tytime_arrows);
else
document.getElementById («moris_down_img»).style.display=»none»;
return false;
}
function slow_moris_scroll ()
{
var tmoris_body=window.document.body;
var moris_height=tmoris_body.scrollHeight;
var moris_top=moris_the_highest_point ();
if (moris_top==0)
document.getElementById («moris_up_img»).style.display=»none»;
else
document.getElementById («moris_up_img»).style.display=»block»;
return false;
}
setInterval («slow_moris_scroll ()»,100);
document.write (‘
‘);
[/cc]
Скачать полностью дистрибутив скрипта кнопок вверх вниз можно по этой ссылке.
Послесловие:
Наличие кнопки Вверх вниз считается правилом хорошего тона на блогах и сайтах созданных для людей. Не пренебрегайте этим элементом сайта и пользователи скажут вам СПАСИБО. А о том как установить кнопку Наверх и кнопку Вниз вы уже узнали из этого поста.
http://tmoris.ru/webmastering/knopka-vverx-vniz.html# — link
