chayn1k / troller

Компонент для прокрутки к верху документа и обратно

To top scRoller

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

Подключив к своим страницам данный компонент, вы получите панель для быстрой прокрутки наверх и обратно.

Демонстрация

Вы можете попробовать компонент в работе, добавив ссылку отсюда в закладки и нажав на неё, находясь на *любой длинной странице.

*Адрес страницы не должен начинаться с https.

Стили панели

Изначально панель оснащена следующим набором стилей:

.troller {
  box-sizing: border-box;
  color: #bbb;
  display: none;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  height: 100%;
  left: 0;
  padding: 12px 10px;
  position: fixed;
  text-decoration: none;
  top: 0;
  user-select: none;
  z-index: 9999;
}
.troller:hover {
  background-color: rgb(235, 245, 255);
  background-color: rgba(70, 90, 110, .1);
  color: #999;
}
.trollerArrow { fill: #bbb; }
.trollerArrow:hover { fill: #999 }

box-sizing и user-select добавляются с нужными браузеру префиксами.

Вы всегда можете переопределить эти стили при помощи !important.

В состоянии наверху страницы панели добавляется класс trollerIsDown, если страница прокручена ниже — trollerIsUp.

Вызов

Troller.create();

Можно задать элемент для отображения вместо стрелок:

Troller.create({
  // стрелка наверх
  uarr : '<span class="trollerArrowUp"></span>',
  // стрелка вниз
  darr : '<span class="trollerArrowDown"></span>'
});

Благодаря переменной можно запустить функцию прокрутки из произвольного места пользовательского скрипта. Вызов

var troller = Troller.create();
troller.scroller();

прокрутит страницу так же, как если бы совершилось нужное Троллеру событие (если есть куда крутить, конечно).

Поддержка

Компонент проверен в обозревателях марок ИЕ (7–9) и в современных: Файрфокс, Хром, Опера, ИЕ 10.

История правок

1.1

• Больше не требуется джКуери (версия на этом фреймворке также есть).
• Стрелки стали красивее в браузерах, поддерживающих СВГ (в неподдерживающих такие же, как раньше)
• Появилась возможность задать собственные стрелки и самостоятельно включать функцию прокрутки.
• Панели теперь добавляются классы в зависимости от её состояния.
• Добавлены обработчики событий для трогательных устройств.
• Панель теперь скрывается вовремя, не переключая стрелку, когда не следует.
• Устранилась проблема с Оперой, в которой панель не занимала своё место если страница при загрузке находится в прокрученном состоянии. Пример проблемы (похоже, подтверждается только на локальных файлах)

Лицензия

MIT licensed

Copyright (C) 2013 Sergei Vasilev, https://github.com/Ser-Gen/