Сегодня в статье я расскажу про плагин, который позволяет сделать кнопку прокрутки «Наверх» как Вконтакте. Это означает, что после прокрутки страницы в верхнее положение, пользователь может вернуться обратно туда, где он и находился.
Скрипт я решил написать, когда не смог ничего толково найти в интернете с похожей реализацией. Если вам не подходит данное решение, то вы можете воспользоваться описанным ранее, в котором я рассматривал, как сделать стандартную кнопку прокрутки «Наверх».
Подключаем 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
});
Надеюсь, написанный мною плагин поможет сделать ваш сайт более удобным для пользователя, а на этом у меня всё.