Умная кнопка прокрутки «Наверх и обратно»

22 ноября 2014 Антон Кулешов 2243 2

Сегодня в статье я расскажу про плагин, который позволяет сделать кнопку прокрутки «Наверх» как Вконтакте. Это означает, что после прокрутки страницы в верхнее положение, пользователь может вернуться обратно туда, где он и находился.

Реклама

Скрипт я решил написать, когда не смог ничего толково найти в интернете с похожей реализацией. Если вам не подходит данное решение, то вы можете воспользоваться описанным ранее, в котором я рассматривал, как сделать стандартную кнопку прокрутки «Наверх».

Подключаем jQuery библиотеку и плагин:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="smartScrollToTop.js" type="text/javascript"></script>

Что касательно стилей, использовать мы будем из предыдущей статьи. Только добавим CSS свойства для верхнего положения кнопки прокрутки, а именно класс под названием up, где через свойства transform со значением rotate(180deg) будем переворачивать её.

Помещаем её на страницу:

<a href="#" id="totop"></a>

И теперь нам остаётся вызвать плагин:

$(function(){
	$("#totop").smartScrollToTop();
});

Все классы, которые скрипт добавляет при работе, можно изменять. Изначально он настроен таким образам:

$("#totop").smartScrollToTop({
	speed: false,
	classInTop: "up",
	classInAct: "scroll-to-back",
	fadeIn: 600,
	fadeOut: 600
});

Надеюсь, написанный мною плагин поможет сделать ваш сайт более удобным для пользователя, а на этом у меня всё.

Реклама
ti1schweiger
ti1schweiger 22 ноября 2014
Яхууууу, долго такую штуку искал, спс биг)
Антон Кулешов
Антон Кулешов 22 ноября 2014
Пользуйтесь на здоровье.
no_avatar
Читайте далее

Простой прогресс бар с набором настроек

3 февраля 2015 Антон Кулешов

Если вы используете на своем сайте какие-либо калькуляторы, которым надо дать время на расчет, или просто сложные скрипты, то вам весьма пригодится такое расширение, как progressbar.

Улучшенная подсветка кода от prism

11 февраля 2015 Антон Кулешов

Доброго времени суток, читатели falbar и гости, зашедшие на эту страницу. В сегодняшней статье я хочу рассказать о том, как подключить к себе на сайт подсветку кода, а именно, плагин под названием prism. Мы разберём не только саму библиотеку, но и, чуть-чуть, затронем back-end.

О том, как не «склеить ласты» и не заблудиться в «трех доменах»

13 июля 2015 ti1schweiger

Поисковики борются за уникальность контента в сети, и борьба эта, должен сказать, ведется довольно жестко. Сайты-копии полностью или частично повторяющие контент «склеиваются», и в результате в поисковой выдаче мы видим только один из сайтов. С точки зрения борьбы с пиратством – довольно правильное решение, но и вебмастеру надо держать ухо востро.