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

22 ноября 2014 Антон Кулешов 2245 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
Читайте далее

Подбор слов, объективная необходимость или отрезанные крылья

15 июня 2015 ti1schweiger

Продолжая тему развития популярности блога, хотелось бы поделиться личным опытом и «набитыми шишками». Начиная вести falbar, мы столкнулись с весьма странным обстоятельством: статьи есть, темы тоже, вроде бы интересные, материал тоже уникальный (с точки зрения плагиата), а в выдаче Яндекса сайта как нет, так и нет. Выхода особого не оставалось: или забивать или обратить внимание на SEO как таковое. На тот момент, хоть я и работал молодым сеошником в маленькой региональной конторке, должного значения для сео в развитии блога я, почему-то, не придал. Да что там, мы же не окна и двери продаем, да даже и не кондиционеры, информационные статьи в моём тогдашнем понимании должны били вылазить в поиске сами собой. Да не тут-то было!

Ищем шрифты для оформления сайта

22 июля 2014 Антон Кулешов

Беря в верстку новый проект, очень часто сталкиваешься с проблемой отсутствия необходимых шрифтов, а если их нет у тебя – веб-разработчика, то, практически со 100% вероятностью, их нет и у рядового пользователя интернета, для которого ты и ваяешь сайт.

Как быстро найти и скачать нужные драйвера

18 июля 2014 ti1schweiger

Совсем недавно столкнулся с проблемой: найти и скачать драйвера для ноутбука HP. Модель была относительно новая с предустановленной восьмеркой, после сноса её и установки Windows 7 добрый десяток устройств отказались адекватно работать из-за отсутствия необходимых драйверов.