Реклама
timeweb
falbar

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

22 ноября 2014 2416 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
22 ноября 2014
Яхууууу, долго такую штуку искал, спс биг)
Антон Кулешов
22 ноября 2014
Пользуйтесь на здоровье.
no_avatar