О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Умная кнопка прокрутки «Наверх и обратно»
  • Инструменты
  • Заработок
  • Раскрутка
22 ноября 2014 . Антон Кулешов

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

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

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

Подключаем 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
});

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

#Кнопки
6 914 2
Антон Кулешов
Плавная кнопка прокрутки «Наверх» 21 эффект для ссылки Кнопка «Добавить в избранное» на JavaScript Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик 22 эффекта для кнопок
ti1schweiger
ti1schweiger
22 ноября 2014
Яхууууу, долго такую штуку искал, спс биг)
Антон Кулешов
Антон Кулешов
22 ноября 2014
Пользуйтесь на здоровье.

FlexSlider - адаптивный слайдер для сайта

Плавная кнопка прокрутки «Наверх»

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание