Кнопка вверх


...пропустить лирику...

Преамбула

Когда-то давно для того, чтобы перейти на начало и на конец страницы в браусере, посетители сайтов использовали кнопки Home и End соответственно на клавиатуре. Это было удобно, логично и естественно.

Однако c течением времени пользователи стали тянуть пальцы к клавишам всё реже и реже, полностью переходя к мышевозилову и мышекликанию. И для перехода на начало страницы (где находятся всячески полезные меню) несчастный пользователь, забывший про клавиатуру стал требовать "вот такой кнопочки вверх, как вон на том сайте!", а то "неюзабелен ваш сайт! Я вверх его мотаю-мотаю...".

Разумные вебмастера довольно долго не велись на это разводилово ("зачем тебе кнопка, которая дублирует то, что и так уже у тебя есть?!"), но...

Пришли сотовые телефоны и планшеты без аппаратной клавиатуры, да и те, что с аппаратной клавиатурой - оказались "урезаны". Многих кнопок просто не стало. Home/End - где они? Нету. На экранных калвиатурах их то не было совсем, то они располагались в странных местах и вызывались странными способами...

Потому - мир изменился. И ради пресловутого "юзабилити" приходится вешать на сайт кнопку, которая позволяет промотавшему далеко вниз содержимое страницы нажатием на неё быстро вернуться "наверх".

Как показал опыт, минималистическая быстро работающая и не увеличивающая время загрузки сайта кнопка делается довольно просто с использванием CSS и JS.

Другие такие же

Найдя прекрасную реализацию кнопки вверх тут, я обнаружил, что:
  1. Установка этой кнопки современным "вебмастером" оказывается затруднена, так как требует внесения правок И в html, и в css код сайта, и заливку картинки, и прописывание пути к ней в коде css.
  2. При выключенных в браусере картинках кнопки нету, хотя скрипт работает.
  3. А если вместо картинки поставить подходящий символ текста - не все браусеры его покажут, и в конкретном наборе шрифтов его может не оказаться.
Поэтому:
  1. В данном коде применены исключительно CSS3 конструкции
  2. Всё сведено в один файл, и для его подключения ничего кроме строки в html, не требуется
  3. Кнопка сделана "нейтрально серой", зато заведомо видимой везде

Собственно кнопка

Как поставить кнопку на сайт

  1. Залейте файл topscroll.js в подкаталог /js/ Вашего сайта
  2. Скопируйте нижеприведённый текст в html файл вашего сайта перед </body>
  3. Отрефрешьте страницу своего сайта в любимом браусере и промотайте вниз - справа внизу появится полупрозрачная кнопка, при наведении становящаяся непрозрачной.

Как изменить цвета и положение кнопки

Для этого надо отредактировать в файле topscroll.js стилевые элементы, которые там находятся с 12 по 21 (кнопка как таковая), 24 строку (цвет кнопки при наведении) и с 81 по 84 строки (треугольник в ней, его цвет при наведении не меняется).

После правки кода не забывайте сделать полный рефреш страницы чтобы яваскрипт перегрузился.

Если после правки кода кнопка не появляется - вы допустили синтасксическую ошибку. В любимом вами браусере наверняка есть кнопочка "Инструменты веб разработчика" (Ctrl-Shift-I как правило) - самое время ею воспользоваться и посмотреть в консоль ошибок Яваскрипта.

Совместимость

проверялось на: IE8+ (работает не со всеми DOCTYPE!!!), FF 16+, GoogleChrome ~20+, Opera 12.17, все производные от хрома и FF броусеры 2017 года и многие более старые. На нескольких разных мобильных тоже опробовано.