Скроллинг страницы на jquery

Доброго времени суток, дорогие читатели моего блога! В данной заметки я расскажу и покажу вам, как сделать плавный скроллинг на джейквери. То бишь расскажу как прикрутить интересную фичу к сайту, которая обычно находиться в правом нижнем углу и выглядит в виде кнопки с текстом “Наверх” или в виде стрелочки. Полезность данной фичи заключается в том, что она избавит посетителей вашего сайта от терзания колесика компьютерной  мышки, постоянно прокручивая страницу вверх.

Кстати,  на моем блоге она тоже есть :) . Только на моем блоге она реализована с помощью бесплатного WordPress плагина “Dynamic To Top”. Такой способ реализации кнопки возврата на верх безусловно очень хорош, но он не подойдет, допустим для самописных сайтов. Поэтому вариант с готовыми плагинами и модулями мы пока что рассматривать не будем. Рассмотрим вариант, который подойдет для любого сайта и для любой cms системы. Будь это WordPress, Joomla, DLE не важно.

Код на самом деле очень простой.

Открываем индексную страницу шаблона сайта,  после тега <body> добавляем код самой кнопки

Между тегами <head></head> добавляем код jQuery

Открываем css шаблона, и придаем стиль нашей кнопочки

Вот и все готово. Кнопка с текстом ^ Наверх ^ при прокрутки страниц в низ сайта, должна плавно появляться.

Чтобы в место простой кнопки с текстом появлялась красивая стрелочка, достаточно прописать путь до картинки в css

И удалить текст с блока

Пробуем, делимся, радуемся. Удачи!

Если есть вопросы, задавайте в комментариях ;-)

С уважением, Игорь Дулин


Cервис моментального приема платежей и партнерских программ Glopart.ru



Понравился пост? Поделись с друзьями!

Метки записи

Почитать на ресурсе http://ast-auto.biz об автомобилях

Комментариев: нет

Оставить комментарий


;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

* Обязательные поля.
Ваш email не будет опубликован.