Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » Плавная прокрутка страницы сайта RSS
авг 03 2016 photo

Плавная прокрутка страницы сайта

Alessa Shtern 6 347
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

Плавная прокрутка страницы сайта на jQuery

 

Зачем нужна плавная прокрутка страницы на сайте? Все мы знаем, что при клик на ссылку можно не только переходить на другие страницы, но и перемещаться по самой странице, по якарям. Кто не знает, напомню) Делается это так:

  1. Создаем блок на странице к которому хотим переместиться и присваиваем ему id. Например будет блок с id = block-1
  2. Создаем ссылку на этой странице со следующим адресом <a href="#block-1">Ссылка на блок-1</a>

При клике на такую ссылку мы переместимся на нужный нам блок, но переход будет резкий, как будто открылась новая страница. Такой вариант имеет место быть, но хочется плавной прокрутки на странице. В этом нам поможет javascript.

Чтобы сделать плавный скролл на jQuery не нужно устанавливать дополнительных плагинов, тем самым излишне нагружая сайт. Мы воспользуемся всего несколькими строчками для получения нужного эффекта.

И так немного кода javascript для скролла:


$(document).ready(function() {
   $('a[href^="#"]').click(function () { 
     linkHref = $(this).attr("href");
     blockTop = $(linkHref).offset().top;
     if($.browser.safari){
       $('body').animate( { scrollTop: blockTop }, 1200 );
     }else{
       $('html').animate( { scrollTop: blockTop }, 1200 );
     }
     return false;
   });
 });

Этот код лучше поставить внизу страницы перед закрывающим тегом body, предварительно завернув в тег <script>. И вуаля! На сайте появилась плавная прокрутка страницы до якоря. Теперь пользователь плавно перемещается по длинным страничкам и лендингам.

Такой код будет работать на всем сайте и вместо резкого перехода везде будет плавная прокрутка к якорю страницы.

Часто вебмастера спрашивают как сделать плавную прокрутку на CSS, но увы это невозможно. Без яваскрипт тут не обойтись. Выше код написан на  jQuery, поэтому следует убедиться что у вас подключена эта библиотека на сайте. Если нет, то подключить ее достаточно просто, разместив между тегами head следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Теперь при перемещении по странице вашего сайта посетитель будет плавно передвигаться от якоря к якорю, что сделает навигацию более понятной.

Чтобы посмотреть на результат нашей работы, жмем кнопку ниже.

Демо

Теги: плавная прокрутка

HashFlare
Другие новости по теме:
  • Как закрыть ссылку от индексации при помощи javascript
  • jQuery tabs - простые вкладки
  • jQuery Uniform - плагин для Select, Checkbox, Textarea
  • Как работает jQuery?
  • jQuery. Что это и для чего нужен?

Комментарии к: Плавная прокрутка страницы сайта (2)

    1. №1  Антон 13-06-2017 Цитировать

      С библиотекой 3.1.0 не работате - в демо у тебя другая библиотека подключена 

    1. №2  Alessa Shtern 16-06-2017 Цитировать

       В демо действительно старая версия jquery. На 3.1. не тестировала. Ошибки какие то выдает? или просто не работает?

Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Как закрыть ссылку от индексации при помощи javascript
  • jQuery tabs - простые вкладки
  • jQuery Uniform - плагин для Select, Checkbox, Textarea
  • Как работает jQuery?
  • jQuery. Что это и для чего нужен?
  • Популярное
  • Авторизация
  • Как закрыть ссылку от индексации при помощи javascript
  • Как выявить дополнительные резервы для продвижения в поиске
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Принципы резиновой верстки сайта
  • Плавная прокрутка страницы сайта
  • Лучшие движки для сайтов: преимущества и недостатки
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
  • Парсер контента от Datacol
  • Обратные ссылки на сайт: чем они полезны в SEO продвижении?
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015