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


плавная прокрутка страницы
В некоторых браузерах, например в Chrome и Opera, страница прокручивается вниз-вверх с прерываниями и неравномерно, что не очень эстетично. Это касается в первую очередь Landing Page. Я считаю, что плавная прокрутка страницы колесиком мыши — это неотъемлемый элемент дизайна или юзабилити, современной продающей страницы. Без этого элемента можно обойтись, но лучше использовать его в своих проектах. А если на странице реализован рarallax эффект, то плавная прокрутка страницы просто обязательна.

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

Скачать

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

Для работы плавной прокрутки страницы требуется подключенная библиотека jQuery.
Подгружаем с серверов Google (рекомендую)

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

Либо скачиваем и подключаем локально

<script src="js/jquery.min.js"></script> 

Аналогично подключается плагин плавной прокрутки страницы plugins-scroll.js

Ну и в завершении установки плавной прокрутки страницы, в окончание файла index.html добавляем инициализацию плагина plugins-scroll.js.

В итоге для работы плавной прокрутки нужно в окончание index.html добавить следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/plugins-scroll.js"></script>
<script>
// Skroll-page $(document).ready(function() { //Chrome Smooth Scroll try { $.browserSelector(); if($("html").hasClass("chrome")) { $.smoothScroll(); } } catch(err) { }; });</script>

В архиве с примером более наглядно видно подключение плагина плавной прокрутки. Ну а так, я раньше на эту прокрутку как-то и внимания не обращал, а теперь она у меня присутствует в папке с базовым набором плагинов для лендингов. Как нибудь поделюсь своими наработками, если кому интересно — пишите.


Похожие по Тегам статьи


42 thoughts on “Плавная прокрутка страницы jQuery

  1. Василь

    Отличная статья! … как же приятно читать и учиться у специалиста своего дела…
    Егор — не тормози! Пиши больше и чаще.

    Порой кажется, что это уже все знают и никому это не нужно. Даже какие нибудь мелочи…. Нет. НУЖНО!!!
    Сайт в закладки.

    Я уже 4 проекта похерил. То от незнания, то из-за лени… Открыл пятый.
    Большая сложность с выбором тематики. Я и видеопроизводством занимаюсь, и сайтами, и про компьютерные программы и системы могу много чего рассказать…
    Говорят, сайт обо всем — это ни о чем. А хочется в одном месте на своем сайте делится всем, что знаю и умею. Дилемма прям… Что посоветуешь?

    И еще. Хотелось бы знать твое отношение к А. Борисову. Я так думаю, что просто понтавитый парень…. хотя кое-что у него действительно есть дельное. Вот и отделяю мух от котлет…

    С уважением.

    1. Егор Автор записи

      Здравствуйте, Василь. Спасибо за комментарий. Насчет что-то посовтовать по тематике сайта, незнаю.
      Если хочется в одном месте, то делайте несколько больших разделов. Почему нет?
      У Борисова есть дельные статьи и прислушаться есть к чему.

  2. Василь

    Егор, нужна статья о подключении собственных шрифтов к своему сайту!

  3. Егор Автор записи

    Я сейчас начинаю цикл статей о создании собственного шаблона WordPress, и там я затрону тему шрифтов. Рассмотрю подключение и некоторые особенности подключения шрифтов к WP.

  4. Василь

    Работает только на главной, а когда переходишь к статье, то плавность пропадает.
    Я создал в корневой директории папку myjs и туда поместил твои три скрипта: common.js, modernizr.js, plugins-scroll.js. В коде изменил название папки js на myjs.
    В итоге отличная плавная прокрутка пошла на главной, но исчез слайдер.
    Добавил в коде после script src=»myjs/plugins-scroll.js»></script . Не хочет все равно прокрутка самой статьи работать.
    Объясни зачем вообще этот common.js. Зачем у тебя в архиве файл smooth.css ? Я так понял это добавление шрифта roboto?
    В общем много вопросов…
    Помоги, пожалуйста, разобраться.

    1. Василь

      …не написалось…
      Добавил в коде после script src=»myjs/plugins-scroll.js»></script

  5. Егор Автор записи

    Здравствуйте. Во первых нужно посмотреть, может modernizr.js уже подключен.
    common.js — инициализация плагина прокрутки.
    css файл нужен лишь для демки, там все ясно ведь.

    Не правильно подключаете скрипты скорее всего. Так и не скажешь на вскидку.
    Сайт на WordPress или HTML статика?

  6. Василь

    Оперативно, однако… Спасибо! )))
    Сайт на вордпрессе. А где посмотреть подключен ли modernizr.js ? Или просто попробовать из твоего скрипта удалить?

  7. Егор Автор записи

    Видел сайт. Вобщем библиотеку то не нужно подключать! Она на вордпресс уже подключена!
    script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
    Этот скрипт не нужен. Отключайте его сразу.

    Добавьте в файл functions.php этот код:

    function my_scripts_styles() {
    // Здесь Modernizr
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/myjs/modernizr.js', array( 'jquery' ), '1.0', true );
    // Здесь Скролл
    wp_enqueue_script( 'scroll', get_template_directory_uri() . '/myjs/plugins-scroll.js', array( 'jquery' ), '2.5', true );
    // Инициализация
    wp_enqueue_script( 'common', get_template_directory_uri() . '/myjs/common.js', array( 'jquery' ), '1.1', true );
    // Сюда по аналогии можно добавлять еще скрипты
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );
    

    Вот здесь еще инфа по скриптам на вордпресс
    http://filwebs.ru/podklyuchenie-skripta-k-wordpress/

  8. Егор Автор записи

    Вот короче код выложил. Должно работать. Если конфликтует со слайдером, то нужно уже смотреть, что к чему на месте.

  9. Василь

    В functions.php вообще нигде не работает. Попробовал еще в двух темах. ((

    1. Егор Автор записи

      Правильно путь к скриптам прописан?
      У меня ведь работает все.

  10. Егор Автор записи

    Вариант как у меня:

    Это содержимое файла common.js — помещаем в footer.php сразу перед закрывающимся тегом </body>

     <script>
    //Chrome Smooth Scroll
    try {
    $.browserSelector();
    if($("html").hasClass("chrome")) {
    $.smoothScroll();
    }
    } catch(err) {
    };
    </script>

    А остальное в файл functions.php

    function my_scripts_styles() {
    // Здесь Modernizr
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/myjs/modernizr.js', array( 'jquery' ), '1.0', true );
    // Здесь Скролл
    wp_enqueue_script( 'scroll', get_template_directory_uri() . '/myjs/plugins-scroll.js', array( 'jquery' ), '2.5', true );
    // Сюда по аналогии можно добавлять еще скрипты
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );
    

    Все должно работать !!!

    НО! Если так не пойдет, то попробуйте вообще убрать modernizr.js

    function my_scripts_styles() {
    // Здесь Скролл
    wp_enqueue_script( 'scroll', get_template_directory_uri() . '/myjs/plugins-scroll.js', array( 'jquery' ), '2.5', true );
    // Сюда по аналогии можно добавлять еще скрипты
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );
    

    Но тот, что в footer нужно оставить.

    1. Егор Автор записи

      Все варианты. Должен цуко работать 🙂 🙂 🙂

  11. Василь

    Вот моя тема на Яндекс.Диске.
    Попробуйте сами. Ничего не помогает, «цуко» )). Только когда самый первый код в index.php ставлю, вот тогда работает. Но только на главной.
    Надеюсь локальный сервер есть…))

    1. Егор Автор записи

      Я не пойму? Причем здесь index.php? Это код для статики в посте. Для лендингов. Тода уже подключаться нужно в footer , что-бы работало на всех страницах. Пока ничего не подключайте. Я скачал тему.

    1. Егор Автор записи

      Так я за вас должен делать вам? Что-то я не понял, видимо 🙂

  12. Василь

    Проблему решил пипец как просто.
    Ни в каких functions.php ничего не прописывал.
    Скачал файл SmoothScroll.js, забросил его в папку свою myjs в корне и в футере просто прописал —
    script type=’text/javascript’ src=’/myjs/SmoothScroll.js’></script (с уголками на концах, конечно)
    Вес файла 14кб.
    ВСЕ! Можешь посмотреть.
    Кстати, и функциональность слайдера абсолютно не нарушилась.
    Спасибо. ))

  13. Егор Автор записи

    Я его тестировал. В браузере Опера вообще не прокручивается сайт. Просто не прокрутишь сайт вниз.

  14. Василь

    Тогда добавим правила функции и для оперы…

  15. Василь

    Установил Оперу ( Opera_32.0.1948.69 )
    И вижу отличный скроллинг на сайте. ))
    Уж не знаю почему у тебя нет…

    1. Егор Автор записи

      Версия: 32.0.1948.69 — Используется обновленная версия Opera
      Канал обновлений: Stable
      Система: Windows 7 64-bit (WoW64)

      Вот моя Опера

  16. Василь

    Даже пропала вся необходимость в кнопке «Наверх».
    В Опере еще плавнее идет, чем в Хроме.

    1. Егор Автор записи

      Может у меня какое расширение мешает работе прокрутки. Незнаю.

  17. Alex

    Добрый вечер Егор! Нашел вашу статью про плавную прокрутку — очень помогла, спасибо, но есть одно НО — поясню:
    на одном сайте сделал как написано — все работает
    на другом сайте не работает (искать причину пока не стал да и нет необходимости, просто проверял, потом поковыряюсь).

    У меня только один вопрос — где поменять код, чтобы прокрутка стала еще плавнее? (хотя и так нормально)((код знаю плохо, потому и спрашиваю))
    Заранее спасибо.

  18. Егор Автор записи

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

    А насчет увеличения плавности, сейчас открыл скрипт, там нужно смотреть. Позже если что сюда напишу.

    1. Лариса

      тоже интересно как увеличить плавность, спасибо)

  19. Лариса

    огромное спасибо! очень полезная инфа у вас — совсем по-другому теперь смотрится страничка)

  20. Егор Автор записи

    Здравствуйте, да, поменял шаблон. Плавная прокрутка больше для лендингов идет.

  21. Руслан

    Подскажите пожалуйста вот по какой проблеме:
    Сделал у себя на лендинге плавную прокрутку вашим плагином, все круто!!! очень нравиться!
    Но так же у меня стоит плагин всплывающих окон jquery.magnific-popup.min.js. Этот плагин при открытии всплывающего окна блокирует прокрутку тега html, ну как и должно быть, чтобы нельзя было скроллить сайт когда открыто всплывающее окно.
    Так вот если я ставлю ваш плагин плавного скролла то при открытии всплывающего окна прокрутка сайта не блокируется… сайт под окном можно все равно прокручивать.

    Помогите пожалуйста!!! 2й день бьюсь, не получается так сделать…
    Заранее благодарен!

    1. Егор Автор записи

      Здравствуйте. Даже и не знаю, чем помочь. Не сталкивался с таким.

      1. Руслан

        пробовал попытаться остановить ваш плагин на время пока открыто окно, не выходит.
        Там какая то хитрая система…
        Случайно не знаете как его выключить на время средствами js ?

  22. Dribentsov

    Есть не плохое видео. Может поможет.
    Как создать Jquery якорь «Плавная прокрутка страницы».
    https://www.youtube.com/watch?v=Zi947g6YglY

    1. Егор Автор записи

      Здравствуйте, а причем здесь якорь? В статье идет речь о плавной прокрутке страницы.

  23. Александр

    Добрый день, я воспользовался вашим плагином, очень интересно, он меня просто спас… в связи с новой версией гугл хрома у меня хедер с position fixed ловил глюк и отлетал если мышка во время скрола пролетала над блоком с hover transition …. вообщем спасибо Вам .. однако всё таки плавность в при установке плагинов в хром например или в той же сафари лучше чем у Вас ..с чем это связано? Могли бы доработать? Заранее спасибо и спасибо за то что уже сделали!

    1. Александр

      Там у Вас есть настройки, я немножко их скорректировал и всё прям как по маслу работает)) Вы крутой тип, а есть у Вас ещё что нибудь полезное ? ))

  24. Егор Автор записи

    А что вас интересует? Полезного у меня много!

    1. Александр

      Может какой нибудь правильный easy loader для img ? может качественная галерея с интересными эффектами ? Может какой-нибудь готовый калькулятор , ajax форма отправки писем… или ещё что нибудь полезное и простое из ajax?