Когда-то давно для того, чтобы перейти на начало и на конец страницы
в браусере, посетители сайтов использовали кнопки Home и End соответственно
на клавиатуре. Это было удобно, логично и естественно.
Однако c течением времени пользователи стали тянуть пальцы к клавишам
всё реже и реже, полностью переходя к мышевозилову и мышекликанию.
И для перехода на начало страницы (где находятся всячески полезные
меню) несчастный пользователь, забывший про клавиатуру стал требовать
"вот такой кнопочки вверх, как вон на том сайте!",
а то "неюзабелен ваш сайт! Я вверх его мотаю-мотаю...".
Разумные вебмастера довольно долго не велись на это разводилово
("зачем тебе кнопка, которая дублирует то, что и так уже у тебя есть?!"),
но...
Пришли сотовые телефоны и планшеты без аппаратной клавиатуры, да
и те, что с аппаратной клавиатурой - оказались "урезаны". Многих кнопок
просто не стало. Home/End - где они? Нету. На экранных калвиатурах их
то не было совсем, то они располагались в странных местах и вызывались
странными способами...
Потому - мир изменился. И ради пресловутого "юзабилити" приходится
вешать на сайт кнопку, которая позволяет промотавшему далеко вниз
содержимое страницы нажатием на неё быстро вернуться "наверх".
Как показал опыт, минималистическая быстро работающая и не
увеличивающая время загрузки сайта кнопка делается довольно
просто с использванием CSS и JS.
Другие такие же
Найдя прекрасную реализацию кнопки вверх
тут,
я обнаружил, что:
Установка этой кнопки современным "вебмастером" оказывается
затруднена, так как требует внесения правок И в html, и в css код сайта,
и заливку картинки, и прописывание пути к ней в коде css.
При выключенных в браусере картинках кнопки нету, хотя скрипт работает.
А если вместо картинки поставить подходящий символ текста - не все
браусеры его покажут, и в конкретном наборе шрифтов его может не оказаться.
Поэтому:
В данном коде применены исключительно CSS3 конструкции
Всё сведено в один файл, и для его подключения ничего кроме строки в html, не требуется
Кнопка сделана "нейтрально серой", зато заведомо видимой везде
Собственно кнопка
Как поставить кнопку на сайт
Залейте файл topscroll.js
в подкаталог /js/ Вашего сайта
Скопируйте нижеприведённый текст в html файл вашего сайта
перед </body>
Отрефрешьте страницу своего сайта в любимом браусере и промотайте вниз - справа
внизу появится полупрозрачная кнопка, при наведении становящаяся непрозрачной.
Как изменить цвета и положение кнопки
Для этого надо отредактировать в файле topscroll.js стилевые элементы, которые там находятся
с 12 по 21 (кнопка как таковая), 24 строку (цвет кнопки при наведении)
и с 81 по 84 строки (треугольник в ней, его цвет при наведении не меняется).
После правки кода не забывайте сделать полный рефреш страницы чтобы яваскрипт перегрузился.
Если после правки кода кнопка не появляется - вы допустили синтасксическую ошибку.
В любимом вами браусере наверняка есть кнопочка "Инструменты веб разработчика" (Ctrl-Shift-I
как правило) - самое время ею воспользоваться и посмотреть в консоль ошибок Яваскрипта.
Совместимость
проверялось на: IE8+ (работает не со всеми DOCTYPE!!!), FF 16+, GoogleChrome ~20+, Opera 12.17,
все производные от хрома и FF броусеры 2017 года и многие более старые.
На нескольких разных мобильных тоже опробовано.