В некоторых браузерах, например в 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>
В архиве с примером более наглядно видно подключение плагина плавной прокрутки. Ну а так, я раньше на эту прокрутку как-то и внимания не обращал, а теперь она у меня присутствует в папке с базовым набором плагинов для лендингов. Как нибудь поделюсь своими наработками, если кому интересно — пишите.
Скачать макрос на варфейс архивы макросы. Информация грузовые перевозки из китая авиа на нашем сайте.
Похожие по Тегам статьи
Плавающий виджет WordPress без плагинаВ статье пойдет речь о том как сделать плавающий виджет WordPress без использования плагинов….
Cсылка якорь на странице. Плавный якорь.В данной статье пойдет речь о том, что такое html cсылка якорь на странице…
Маска для ввода номера телефонаМаска для ввода номера телефона дает понять человеку в каком формате вводить номер, а…
Отличная статья! … как же приятно читать и учиться у специалиста своего дела…
Егор — не тормози! Пиши больше и чаще.
Порой кажется, что это уже все знают и никому это не нужно. Даже какие нибудь мелочи…. Нет. НУЖНО!!!
Сайт в закладки.
Я уже 4 проекта похерил. То от незнания, то из-за лени… Открыл пятый.
Большая сложность с выбором тематики. Я и видеопроизводством занимаюсь, и сайтами, и про компьютерные программы и системы могу много чего рассказать…
Говорят, сайт обо всем — это ни о чем. А хочется в одном месте на своем сайте делится всем, что знаю и умею. Дилемма прям… Что посоветуешь?
И еще. Хотелось бы знать твое отношение к А. Борисову. Я так думаю, что просто понтавитый парень…. хотя кое-что у него действительно есть дельное. Вот и отделяю мух от котлет…
С уважением.
Здравствуйте, Василь. Спасибо за комментарий. Насчет что-то посовтовать по тематике сайта, незнаю.
Если хочется в одном месте, то делайте несколько больших разделов. Почему нет?
У Борисова есть дельные статьи и прислушаться есть к чему.
Егор, нужна статья о подключении собственных шрифтов к своему сайту!
Я сейчас начинаю цикл статей о создании собственного шаблона WordPress, и там я затрону тему шрифтов. Рассмотрю подключение и некоторые особенности подключения шрифтов к WP.
отлично!
С нетерпением. ))
Работает только на главной, а когда переходишь к статье, то плавность пропадает.
Я создал в корневой директории папку myjs и туда поместил твои три скрипта: common.js, modernizr.js, plugins-scroll.js. В коде изменил название папки js на myjs.
В итоге отличная плавная прокрутка пошла на главной, но исчез слайдер.
Добавил в коде после script src=»myjs/plugins-scroll.js»></script . Не хочет все равно прокрутка самой статьи работать.
Объясни зачем вообще этот common.js. Зачем у тебя в архиве файл smooth.css ? Я так понял это добавление шрифта roboto?
В общем много вопросов…
Помоги, пожалуйста, разобраться.
…не написалось…
Добавил в коде после script src=»myjs/plugins-scroll.js»></script
Здравствуйте. Во первых нужно посмотреть, может modernizr.js уже подключен.
common.js — инициализация плагина прокрутки.
css файл нужен лишь для демки, там все ясно ведь.
Не правильно подключаете скрипты скорее всего. Так и не скажешь на вскидку.
Сайт на WordPress или HTML статика?
Оперативно, однако… Спасибо! )))
Сайт на вордпрессе. А где посмотреть подключен ли modernizr.js ? Или просто попробовать из твоего скрипта удалить?
Видел сайт. Вобщем библиотеку то не нужно подключать! Она на вордпресс уже подключена!
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/
Вот короче код выложил. Должно работать. Если конфликтует со слайдером, то нужно уже смотреть, что к чему на месте.
В functions.php вообще нигде не работает. Попробовал еще в двух темах. ((
Правильно путь к скриптам прописан?
У меня ведь работает все.
Вариант как у меня:
Это содержимое файла 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 нужно оставить.
Все варианты. Должен цуко работать 🙂 🙂 🙂
Вот моя тема на Яндекс.Диске.
Попробуйте сами. Ничего не помогает, «цуко» )). Только когда самый первый код в index.php ставлю, вот тогда работает. Но только на главной.
Надеюсь локальный сервер есть…))
Я не пойму? Причем здесь index.php? Это код для статики в посте. Для лендингов. Тода уже подключаться нужно в footer , что-бы работало на всех страницах. Пока ничего не подключайте. Я скачал тему.
Егор, вы наверное забыли про меня…((
Так я за вас должен делать вам? Что-то я не понял, видимо 🙂
Проблему решил пипец как просто.
Ни в каких functions.php ничего не прописывал.
Скачал файл SmoothScroll.js, забросил его в папку свою myjs в корне и в футере просто прописал —
script type=’text/javascript’ src=’/myjs/SmoothScroll.js’></script (с уголками на концах, конечно)
Вес файла 14кб.
ВСЕ! Можешь посмотреть.
Кстати, и функциональность слайдера абсолютно не нарушилась.
Спасибо. ))
Я его тестировал. В браузере Опера вообще не прокручивается сайт. Просто не прокрутишь сайт вниз.
Тогда добавим правила функции и для оперы…
Когда сделаешь, пиши.
Установил Оперу ( Opera_32.0.1948.69 )
И вижу отличный скроллинг на сайте. ))
Уж не знаю почему у тебя нет…
Версия: 32.0.1948.69 — Используется обновленная версия Opera
Канал обновлений: Stable
Система: Windows 7 64-bit (WoW64)
Вот моя Опера
Даже пропала вся необходимость в кнопке «Наверх».
В Опере еще плавнее идет, чем в Хроме.
Может у меня какое расширение мешает работе прокрутки. Незнаю.
Добрый вечер Егор! Нашел вашу статью про плавную прокрутку — очень помогла, спасибо, но есть одно НО — поясню:
на одном сайте сделал как написано — все работает
на другом сайте не работает (искать причину пока не стал да и нет необходимости, просто проверял, потом поковыряюсь).
У меня только один вопрос — где поменять код, чтобы прокрутка стала еще плавнее? (хотя и так нормально)((код знаю плохо, потому и спрашиваю))
Заранее спасибо.
Здравствуйте, причиной не работы на одном из сайтов может быть непоследовательное подключение скриптов. Сначала библиотека, потом скролл и инициализация. Посмотрите в исходном коде последовательность.
А насчет увеличения плавности, сейчас открыл скрипт, там нужно смотреть. Позже если что сюда напишу.
тоже интересно как увеличить плавность, спасибо)
огромное спасибо! очень полезная инфа у вас — совсем по-другому теперь смотрится страничка)
Здравствуйте, да, поменял шаблон. Плавная прокрутка больше для лендингов идет.
Подскажите пожалуйста вот по какой проблеме:
Сделал у себя на лендинге плавную прокрутку вашим плагином, все круто!!! очень нравиться!
Но так же у меня стоит плагин всплывающих окон jquery.magnific-popup.min.js. Этот плагин при открытии всплывающего окна блокирует прокрутку тега html, ну как и должно быть, чтобы нельзя было скроллить сайт когда открыто всплывающее окно.
Так вот если я ставлю ваш плагин плавного скролла то при открытии всплывающего окна прокрутка сайта не блокируется… сайт под окном можно все равно прокручивать.
Помогите пожалуйста!!! 2й день бьюсь, не получается так сделать…
Заранее благодарен!
Здравствуйте. Даже и не знаю, чем помочь. Не сталкивался с таким.
пробовал попытаться остановить ваш плагин на время пока открыто окно, не выходит.
Там какая то хитрая система…
Случайно не знаете как его выключить на время средствами js ?
Есть не плохое видео. Может поможет.
Как создать Jquery якорь «Плавная прокрутка страницы».
https://www.youtube.com/watch?v=Zi947g6YglYЗдравствуйте, а причем здесь якорь? В статье идет речь о плавной прокрутке страницы.
Добрый день, я воспользовался вашим плагином, очень интересно, он меня просто спас… в связи с новой версией гугл хрома у меня хедер с position fixed ловил глюк и отлетал если мышка во время скрола пролетала над блоком с hover transition …. вообщем спасибо Вам .. однако всё таки плавность в при установке плагинов в хром например или в той же сафари лучше чем у Вас ..с чем это связано? Могли бы доработать? Заранее спасибо и спасибо за то что уже сделали!
Незачто, Александр.
Там у Вас есть настройки, я немножко их скорректировал и всё прям как по маслу работает)) Вы крутой тип, а есть у Вас ещё что нибудь полезное ? ))
А что вас интересует? Полезного у меня много!
Может какой нибудь правильный easy loader для img ? может качественная галерея с интересными эффектами ? Может какой-нибудь готовый калькулятор , ajax форма отправки писем… или ещё что нибудь полезное и простое из ajax?