Показать Меню
falbar Кнопка прокрутки «Наверх и обратно»

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

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

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

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

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