Как установить на сайте кнопку вверх вниз

Очень удобно когда на сайте есть кнопки, с помощью которых можно быстро переместиться в самый вверх страницы или наоборот в самый низ, особенно если страница длинная. Кнопки вверх-вниз я использовал еще до того как стало модно устанавливать их на сайты - есть замечательное и популярное расширение для chrome "Scroll To Top Button", оно добавляет на всех сайтах эту удобную кнопку.

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

Опишу как установить такие кнопки на сайт. Алгоритм установки подойдет для сайта на любой cms, но так, как я использую wordpress, то буду описывать на его примере.

Есть большое количество вариаций таких кнопок, как в оформлении, так и в самой реализации.

Мне понравился вариант в котором:

  • присутствует не только кнопка "вверх", но и кнопка "вниз".
  • отсутствуют изображения - реализация на легком css.
  • используется jQuery

Первое что сделаем - это подключим javascript-библиотеку jQuery, если она у Вас не подключена. Хочу оговориться, что у меня она была подключена, но версия оказалась ниже необходимой. Потому мне все равно пришлось ее подключать. Смотрим исходный код страницы и ищем слово jquery. Я у себя нашел вот такую строку:

<script type='text/javascript' src='https://elims.org.ua/wp-includes/js/jquery/jquery.js?ver=1.10.2'>
</script>

Понятно что версия этой библиотеки "ver=1.10.2", но лучше перестраховаться и кликнуть на ссылку (адрес яваскрипта) и в самом верху прочесть версию библиотеки. У себя я увидел:

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license

Для кнопок, которые мне понравились, нужна библиотека версии 1.7.2. Потому в нужном шаблоне заходим в файл header.php и добавляем в нем строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

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

<!— Start: Кнопки вверх вниз —>
<script type="text/javascript">
jQuery(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>
<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>
<!— End: Кнопки вверх вниз —>

Осталось добавить css-стили кнопок: переходим в файл style.css вашего шаблона и добавляем следующие строки:

/* Start: Кнопки вверх вниз */
.go-up,
.go-down {
display:none;
position: fixed; /*позиционируем*/
right: 5px; /*указываем положение, если слева - left*/
z-index: 9999; /*показываем поверх все элементов на странице*/
background: #4F4F4F;
border: 2px solid #ccc; /*толщина, стиль, цвет рамки*/
box-shadow: 0 10px 0.3em -0.1em rgba(0,0,6,0.5); /*тень*/
border-radius: 10px;
cursor: pointer;
color: #fff; /*цвет стрелок*/
text-align: center; /*выравнивание*/
font-size: 40px; /*размер стрелок*/
text-shadow: 0 1px 2px #000, 0 0 10px #E0F1FF;
opacity: .7; /*прозрачность*/
padding: 0px 3px 10px 3px; /*отступы внутри*/
margin-bottom: 5px; /*отступ снизу (можно не указывать)*/
width: 48px; /*ширина кнопки*/
height: 48px; /*высота кнопки*/
}
.go-up {
bottom: 75px; /*положение от низа окна браузера*/
}
.go-down {
bottom: 10px;
}
/*стили при наведении курсора*/
.go-down:hover,
.go-up:hover {
opacity: 1;
}
/* End: Кнопки вверх вниз */

Готово! Результат можете видеть на этом блоге.

Кнопки не маленькие - это мне нравиться:

  • они заметны
  • на телефоне по ним можно легко попасть

Автор скрипта: http://www.magentawave.com/2013/01/scroll-page-up-and-down.html

Понравилось? =) Поделись с друзьями:

Обсуждение записи “Как установить на сайте кнопку вверх вниз”

  1. Простой (nikosun.com) says:

    Скажите, а этот способ проходит валидность? Он валидный?

  2. Владимир Демянович (elims.org.ua) says:

    На валидность чего? Какого стандарта?

  3. Простой (nikosun.com) says:

    Если потом проверить тут validator.w3.org/, то не будет ли жаловаться на код кнопки вверх, вниз?

  4. Владимир Демянович (elims.org.ua) says:

    Там можно указывать разные стандарты. Если проверять не указав стандарт, то будет ругаться. Например у меня ругается на код, который дал гугл для adsense.

    По поводу кнопок вверх-вниз, ругается на строки:
    < !— Start: Кнопки вверх вниз —>
    < !— End: Кнопки вверх вниз —>
    Их можно убрать.

    В строке подключения jquery:
    script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»
    Ругается на то, что не указан тип скрипта, type=»text/javascript», хотя в новых стандартах его как раз указывать и не надо. Если надо, можно указать.

    Также ругается на знак < в строках if (jQuery(window).scrollTop()<="250") jQuery("#ToTop").fadeOut("slow") if (jQuery(window).scrollTop()<=jQuery(document).height()-"999") jQuery("#OnBo…Это можно решить если вынести js-код в отдельный js-файл

  5. Простой (nikosun.com) says:

    Спасибо за ответы.

  6. Владимир Демянович (elims.org.ua) says:

    на здоровье =)

  7. Ольга (oriolga.ru) says:

    Я у себя на сайте установила плагин с кнопкой только вверх. Мне понравился Ваш вариант, Владимир. Но вот то о чем Вы пишите, для меня темный лес…С плагинами я как-то научилась разбираться, а вот с кодами слабо… Жаль конечно, но что делать

  8. Владимир Демянович (elims.org.ua) says:

    Пробуйте, учитесь =) «Век живи — век учись!».
    Начните с инструкции «Для кнопок, которые мне понравились, нужна библиотека версии 1.7.2. Потому в нужном шаблоне заходим в файл header.php и добавляем в нем строку:» и следуйте далее. Вам необходиму будет вставить в три разных файла три кода.

    Перед этими работами обязательно сделайте резервные копии файлов и базы данных. Тогда даже если что-то у себя поломаете — без проблем сможете восстановиться и все вернуть обратно.

    Не бойтесь экспериментировать;)

  9. MagentaWAVE (www.magentawave.com) says:

    Уважаемый администратор этого блога, мне, как автору данной заметки, бесконечно приятно что вы ею делитесь и пользуетесь изложенным в ней вариантом кнопок, но так как рерайтер из вас не очень хороший и я бы даже сказал , ленивый, то пожалуйста разместите ссылку на первоисточник материала, а именно www.magentawave.com/2013/01/scroll-page-up-and-down.html

    С уважением администратор блога о веб-дизайне magentawave.com

  10. Владимир Демянович (elims.org.ua) says:

    Уважаемый MagentaWAVE, удивлен почему вы сочли эту статью рерайтом, так как рерайтом я уже не занимаюсь. Естественно я оставлю ссылку на Вас как на автора скрипта, он действительно хорош =) Только подскажите, пожалуйста каким сервисом вы проверяете тексты на рерайт? Может возьму себе на вооружение, так как покупают копирайт на биржах текста и проверяю их на уникальность.

    Я проверил уникальность этой статью вот тут: text.ru/text_check/result/52b9d306d0700 — уникальность 100% (если исключить мой домен).
    Конечно я вырезал сам код скрипта. Вы же под словом «рерайт» не рерайт кода подразумевали, правильно?

    Более того, если сравнить Ваш код скрипта, и тот код который указан в моей записи, то я могу заметить строки, значение которых я не понимаю (все таки я плаваю в css и js скриптах, знания у меня поверхностные), но при этом они не совпадают с Вашими строками. Это говорит о том, что я эти строки не редактировал и код не был скопирован с Вашего сайта, либо Вы сами изменили на своем сайте код уже после того как я его скопировал потому и выходит такое не совпадение.

    Придется восстанавливать историю поиска гугла в те даты, когда был опубликован этот пост и попытаться узнать откуда же я этот скрипт скопировал.

    Жду ответа и сразу же публикую ссылку =)

    С уважением.

  11. Владимир Демянович (elims.org.ua) says:

    Историю восстановил. Действительно 8 августа я посещал Ваш сайт. Извиняюсь что не указал на автора скрипта, исправляюсь.

    И все-таки подскажите чем вы проверяете уникальность текста и какой сервис указал что этот текст не уникальный (из текста естественно исключаем сам скрипт)=)

  12. MagentaWAVE (www.magentawave.com) says:

    Почему рерайт, потому что совпадения данного текста с оригиналом, с учетом размещенных в нем кодов, а именно JS и CSS, что также в данном случае является не мало важным фактором, составляет 30%. Естественно текст, переработан, но даже в этом виде он имеет все признаки неудачного рерайта.
    Программа Advego Plagiatus advego.ru/plagiatus/
    На данный момент статья переработана и стили в ней изменены в лучшую сторону, так что можете воспользоваться новым вариантом (однако первоначальный текст имеется в XML формате копии блога, с датами и именно с таким CSS), что касается самого скрипта так он такой же как и есть с учетом некоторых, совершенно незначительных изменений, что собственно в еще большей степени и подтверждает ленивый и неудачный рерайт =)

    И кстати сказать, если уж запись скрипта делать в таком русле, то лучше писать иначе:
    (function($) {
    $(function() {
    Все дела
    })
    })(jQuery);

    И еще, обо всем этом конечно можно спорить бесконечно, но в любом случаи мы же с вами знаем что к чему ;)

  13. MagentaWAVE (www.magentawave.com) says:

    Запоздал и не увидел вашего коммента. Спасибо за понимание, заходите еще. Я не против размещения на других ресурсах, но не забывайте ссылаться, уж поверьте от этого хуже не будет, что бы там не рассказывали SEO дядьки =)

  14. Владимир Демянович (elims.org.ua) says:

    И Вы заходите, буду рад аргументированной критике =)

  15. Paul O'bry says:

    Магенту жаба задавила!!!!
    Ссылку ему видите ли подавай… )))))))
    Ну написал ты скрипт и что теперь?!

    Кнопка Владимира значительно лучше и проще кнопки Магенты.

    Paul O’bry

  16. Владимир Демянович (elims.org.ua) says:

    Paul O’bry, это не жаба =) Вполне адекватная просьба, в Интернете так принято: ссылаться на используемые ресурсы =)

  17. Paul O'bry says:

    Я использую IE-9 и Windows 7bis. Мне обязательно ссылаться всякий раз на Мicrosoft ?

    Если я где-то что-то встречаю так называемое «своё» у кого-то, и даже если нет упоминания об авторе, мне всегда радостно и приятно, — значит я сделал что-то нужное, полезное людям!!!

    Paul O’bry он же: alfa.master.com

  18. Paul O'bry says:

    P.S.
    Кнопку твою (такую как у тебя на блоге) я обязательно постараюсь реализовать у себя. Ссылку обещаю! ))))))))

    Paul O’bry

  19. Messer says:

    Работает во всех браузерах, кроме хрома… В чем может быть дело?

  20. Владимир Демянович (elims.org.ua) says:

    Messer, а на моем сайте кнопки вверх-вниз в Вашем хроме отображаются? Если и на моем сайте кнопки не отображаются, то скорее всего у Вас в хроме установлен какое-либо расширение блокирующее javascript. Я тоже пользуюсь chrome — у меня все отображается.

  21. Кирилл says:

    Здравствуйте. А подскажите, пожалуйста, на CMS Joomla как называются файлы, аналогичные файлам wordpress.))
    Спасибо.

Обсудить