jQuery Smooth Scroll to Anchor с помощью animate()
Я всегда получаю удовольствие от jQuery … особенно от методов анимации.
Это одна из тех вещей, которые просто ошеломляют клиентов… и, честно говоря, я чувствую себя довольно круто, наблюдая за анимацией на сайте.
Тем не менее, многое из того, что вы можете сделать с анимацией jQuery, — это больше, чем «услада для глаз»… они помогают улучшить взаимодействие с пользователем.
Это одна из таких анимаций: сглаживание прокрутки до тега привязки.
Вместо этого резкого мигания, которое вы получаете в браузере по умолчанию… вы получаете приятную плавную прокрутку, которая дает посетителю сайта некоторый контекст о том, что он только что щелкнул и куда он попал.
Вот как это сделать:
И, если вы дадите мне лайк, я буду очень признателен!
И, как я уже сказал, исходный код доступен на Patreon для умных людей, которые поддерживают шоу. (Вы знаете, что хотите присоединиться к ним.)
P.S. Если вам понравилось шоу, поставьте лайк и поделитесь им с сообществами и людьми, которым, по вашему мнению, это будет полезно. Вы всегда можете найти все мои руководства, выпуски подкастов и многое другое на johnmorrisonline.com, @jpmorris в Твиттере и на youtube.com/johnmorrisvideo.
Подписаться на подкаст
[saf]
Вам также может понравиться
6 способов создать отличный опыт работы вне офиса, чтобы получить больше рекомендаций и постоянных клиентов в вашем внештатном бизнесе
Все мы знаем о важности первого впечатления. Но я думаю, что люди часто забывают, насколько важно «последнее впечатление».
Вы
Подробнее »
7 способов значительно улучшить предоставление услуг в вашем внештатном бизнесе
Забавно. На днях этот парень подошел ко мне в продуктовом магазине и сказал: «Эй, чувак, я могу сказать, что ты работаешь
». Подробнее »
7 вещей, которые нужно включить в процесс онбординга клиентов, чтобы произвести хорошее первое впечатление
Люди ушам верят меньше, чем глазам Геродот Были ли сказаны более правдивые слова? Вот где вы находитесь сейчас. Вы рассказали хорошую игру.
Подробнее »
Внештатные контракты, условия оплаты, формы запросов и все детали получения оплаты (и не облажались)
Есть замечательная история о Джоне Вудене, который выиграл 10 баскетбольных чемпионатов NCAA за 12 лет с UCLA Bruins и также отвечал за
Подробнее »
Как создать неотразимое предложение услуг фрилансера — часть 2
«Если есть сомнения, обратитесь к первоисточнику».
«Звездные войны: Войны клонов» В нашем случае этот «источник» является нашим предложением. Всегда и навсегда, если ты
Подробнее »
Как создать неотразимое предложение услуг фрилансера — часть 1
Значение субъективно. Это не случайный интернет-мудак, Джонни Фриланс, просто так сказал. Это наиболее общепринятая (безусловно) экономическая теория стоимости, которая называется… сюрприз,
. Подробнее »
ДЖОН МОРРИС
Я ветеран веб-разработки с 15-летним стажем. Я работал с авторами бестселлеров и среднестатистическим соседом Джо. В настоящее время я сосредоточен на том, чтобы помогать другим фрилансерам строить свой внештатный бизнес и свой образ жизни.
НазадПредыдущийСамое мощное двухбуквенное слово в веб-разработке
Далее Телефоны с камерами и выживание в ближайшие 10 лет в технологиях Далее
Истории успеха
Готовы добавить свое имя здесь?
Тим Ковелло
75 SEO и веб-клиенты сейчас.
Мой доход упал с нуля до более чем 6 тысяч только в прошлом месяце. Отслеживание 10К на следующий месяц. Серьезно, ты изменил мою жизнь.
Майкл Феникс
Кстати, только что набрал 95 тысяч за год. Я не могу отблагодарить вас за все, чему вы меня научили. Вы изменили мою жизнь. Спасибо!
Стефани Корски
Я начал это 3 дня назад по совету Джона и получил значок Upwork Rising Talent менее чем за 2 дня. Завтра у меня звонок с моим первым потенциальным клиентом. Спасибо, Джон!
Джитин Веду
Джон мужик! Я пошел по его стопам, и через неделю меня завалили интервью. Я попал в два облака талантов. Уже на следующий день я получил приглашение от специалистов по талантам из Upwork и многое другое. Я хочу кричать, он лучший в этом. Спасибо, Джон, что помог мне!
Дивиендра Сингх Джадун
После просмотра курса Джона я создал учетную запись Upwork, и она была одобрена в тот же день. Удивительно, я получил свою первую работу в тот же день, я не мог в это поверить, я думал, может быть, я получил ее случайно.
Сара Муи
Всю последнюю неделю я был в экзистенциальном кризисе из-за того, что, черт возьми, я делаю как владелец бизнеса. Несмотря на то, что я занимаюсь бизнесом около года, я постоянно пытаюсь думать о том, как сократить и улучшить услуги. Это было очень мило и приятно смотреть. Обычно бизнес-курсы, подобные этому, сухие и трудные для понимания…. повторение одних и тех же вещей снова и снова. Это был глоток свежего воздуха. СПАСИБО.
Вакас Абдул Маджид
Я определенно узнал гораздо больше за 2,5 часа, чем я узнал бы, просматривая разные видео онлайн на Youtube и читая тонны статей в Интернете. У Джона естественный способ преподавания, когда он страстно погружается в темы и делает их очень простыми для понимания — тот, кто хочет, чтобы вы действительно начали хорошо вести свой бизнес, изучив правильные инструменты и внедрив их в свой онлайн-бизнес.
Скотт Плюд
Я слежу за Джоном Моррисом уже несколько лет. Его инструкции варьируются от новичка до продвинутого уровня, вплоть до руководства на уровне генерального директора. Я отправлял к Джону друзей и клиентов и убеждал свою дочь обращать внимание на то, что он говорит. Все его учения приносят мне богатство (и счастье для моих клиентов!) Я не могу говорить достаточно высоко о Джоне, его имя хорошо известно в моем доме.
Сух Плаха
Джон — фантастический и терпеливый наставник, который не только может очень эффективно делиться знаниями и передавать их, но и может поддержать в их применении. Однако я считаю, что Джон обладает очень редкой способностью идти дальше, чем просто делиться знаниями и показывать, как их применять. Он способен врожденно провоцировать любопытство при объяснении и демонстрации концепций до такой степени, что можно исследовать и распутать свой собственный учебный путь.
Мисраб Мохамед
Джон был самым важным человеком в моей карьере фрилансера с самого начала. Без него мне потребовалось бы еще 10 или 20 лет, чтобы достичь того положения, в котором я сейчас нахожусь (продавец 2-го уровня на Fiverr и лучший рейтинг на Upwork).
Последние сообщения
Как исправить прокрутку якорных ссылок с помощью LazyLoading в Divi
Краткое примечание — этот пост посвящен разработке для WordPress с использованием темы Divi и встроенной в WP-Rocket функции LazyLoad, однако я уверен, что большая часть кода или лучших практик будет применима для разработчиков веб-сайтов, использующих LazyLoading и Anchor Link Smooth Scrolling во всех темах.
О LazyLoad
Как любой, кто читает этот пост, вероятно, уже знает, LazyLoading является обязательным для любого веб-сайта с большим количеством изображений, поскольку он откладывает загрузку изображений до тех пор, пока изображения не появятся в области просмотра вашего браузера, что значительно увеличивает ваш сайт.
скорость загрузки, которая может иметь резко положительные последствия для SEO (или отрицательные, если вы этого не сделаете).
Уже доступно множество отличных ресурсов о преимуществах LazyLoading (WP-Rocket) (Google), и я предполагаю, что все, кто читает этот пост, уже знают о преимуществах и внедрили LazyLoading на своем сайте.
О навигационных ссылках Anchor Smooth Scroll
Якорные навигационные ссылки прокрутки — еще одна замечательная стандартная функция, которая позволяет вам ссылаться на определенный раздел, div или элемент страницы, щелкая ссылку или кнопку и ориентируясь на #ID элемента и браузер перейдет к этому месту на странице.
Это можно использовать для одностраничных веб-сайтов и целевых страниц или просто как отличную функцию UX, помогающую посетителям вашего сайта перемещаться по вашему сайту.
Точно так же я предполагаю, что на вашем сайте уже есть прокручивающиеся навигационные ссылки Anchor, иначе вы бы не читали это.
Конфликт прокрутки LazyLoad и Anchor Link
Однако постоянная проблема в Интернете связана с смешиванием LazyLoading с внутренними якорными ссылками.
Почему это происходит? От WP-Rocket…
«Цели прокрутки рассчитываются при загрузке страницы браузером. После того, как страница полностью загружена, браузер «знает» положение каждой цели прокрутки, поэтому он может прокрутить до этой точной позиции, как только вы щелкнете по ссылке меню.
Однако при включенной отложенной загрузке изображения за пределами исходного окна просмотра не загружаются напрямую. Таким образом, позиции элементов, рассчитанные браузером при загрузке страницы, искажаются.
Как только вы начинаете прокручивать, начинают появляться лениво загружаемые изображения, увеличивающие общую высоту документа, и те элементы, положение которых ваш браузер «знал», прежде чем перемещаться дальше по странице».
Даже по собственному совету WP-Rocket, единственный способ обойти это — отключить LazyLoading для поста, в котором вы хотите использовать якорные ссылки.
Есть несколько способов обойти это, например, определить размеры изображения в свойствах изображения, однако с большинством современных тем WordPress и адаптивным веб-дизайном это не всегда так, по крайней мере, не в теме Divi. И опять же, если вы уже пробовали или не можете это реализовать, я предполагаю, что именно поэтому вы здесь.
Что мы узнали об управлении скоростью прокрутки Divi
После долгих раздумий и МНОЖЕСТВА попыток мы смогли найти некоторые решения, которые хорошо работают. Как и при любой настройке темы, многое будет зависеть от ваших потребностей и предпочтений, но мы надеемся, что это будет хорошим ресурсом для поиска рабочего решения для вашего сайта.
Одна вещь, которая присуща теме Divi (и, вероятно, многим), — это скорость плавной прокрутки якорной ссылки, поэтому мы искали способ контролировать эту скорость. Если вы можете устранить эффект плавной прокрутки и перейти прямо к целевой позиции привязки #id, изображения не попадут в окно просмотра и ВУАЛЯ! Задача решена.
Опять же, это, вероятно, будет зависеть от темы и разработчика, однако этот короткий код JQuery позволяет пользователям DIVI «переопределить» настройки темы по умолчанию.
ПРЕДУПРЕЖДЕНИЕ О РАЗРАБОТЧИКЕ — ПОЖАЛУЙСТА, ПРОЧИТАЙТЕ ПЕРЕД ДВИЖЕНИЕМ
Как и в случае с любой темой WordPress, крайне нежелательно изменять непосредственное кодирование файла темы, потому что, как минимум, оно будет перезаписано при любых будущих обновлениях темы, а в худшем случае потенциально может сбой всего сайта, если ваша настройка и кодирование конфликтуют или применяются неправильно. Мы всегда рекомендуем использовать дочернюю тему для любых модификаций темы.
Мы проверили, что в теме Divi управляет скоростью плавной прокрутки, и нашли эту часть кода, расположенную в
/wp-content/themes/Divi/js/custom.js
Вы можете просто скопировать этот файл в папку дочерней темы и внести непосредственные корректировки, но простое изменение параметров et_pb_smooth_scroll кажется напрасным.
Вот исходный код темы Divi для справки.
С помощью JQuery мы смогли «переопределить» настройки темы по умолчанию и изменить параметры прокрутки на 0, что удаляет время прокрутки для ссылок привязки Divi. Вы могли бы использовать ту же логику, чтобы еще больше замедлить его, если бы это было вашей целью, однако это не исправило бы неправильную позицию на странице.
Для других разработчиков мы обнаружили, что это отличный ресурс для требований темы Divi для написания/добавления JQuery в Divi, чтобы не было конфликтов с другими скриптами и ресурсами.
Код Divi JQuery для настройки скорости плавной прокрутки Divi
Где разместить JQuery на моем сайте
В зависимости от потребностей вашего сайта вы можете либо добавить это в основную часть вашего сайта (в Divi в разделе «Параметры темы» > Вкладка «Интеграция» с заголовком «Добавить код в
(удобно для кодов отслеживания, таких как Google Analytics)» 9.0005 Вы также можете добавить в начало сообщений.
В целях повышения производительности мы не рекомендуем добавлять код в заголовок, но могут быть случаи, когда это будет иметь смысл для сайта и для каждого в отдельности.
Для многих пользователей это может сразу решить проблему (не забудьте очистить кеш). Попробуйте одну из ваших ссылок Anchor и увидите разницу.
Дополнительные исправления и решения для настройки прокрутки
На нашем веб-сайте и, возможно, на многих других, многие точки прокрутки привязки навигации находились прямо под изображением на странице, что создает проблему из-за природы LazyLoad WP-Rockets по умолчанию.
Настройки по умолчанию для LazyLoading Threshold для WP-Rocket таковы, что изображения загружаются в пределах 300 пикселей от области просмотра (окна браузера).
Существует несколько решений, которые будут различаться в зависимости от ваших потребностей и того, как вы хотите, чтобы ваш сайт функционировал.
Решение 1. Измените div/содержимое над точкой привязки прокрутки, чтобы это не было изображением.
Это может работать не для всех, поскольку некоторые пользователи, естественно, хотят, чтобы изображение появлялось прямо перед нужной точкой прокрутки.
Пока нет изображения прямо над точкой прокрутки (точнее, в пределах 300 пикселей, все будет в порядке.
Решение 2. Используйте дополнительные отступы/поля
Другой вариант — добавить до 300 пикселей
Решение 3. Отрегулируйте порог LazyLoad WP-Rocket LazyLoad в ваши функции.php
Предполагая, что вы используете функцию LazyLoad WP-Rocket, вы можете отредактировать файл functions.php вашей дочерней темы, вы можете добавить этот небольшой фрагмент кода для изменения порога LazyLoad (подробнее читайте в WP-Rocket).
По умолчанию WP-Rocket LazyLoad загружает изображения, которые находятся в пределах 300 пикселей от области просмотра (окна браузера). Однако вы можете настроить этот порог следующим образом. В этом примере порог установлен на 0 пикселей:
Это означает, что изображения не будут пытаться загружаться, пока они не появятся на экране.
Хотя это снова решит проблему прокрутки, компромисс здесь заключается в том, что изображения будут казаться «защелкивающимися» на месте, потому что они будут загружаться, когда появляются на экране.
Опять же, это то, что вам нужно выяснить для себя и для нужд вашего веб-сайта, так как визуально это не идеально.
Если вы не используете WP-Rocket, большинство других плагинов LazyLoad или JQuery также можно настроить, поэтому в этом случае обратитесь к своему поставщику плагинов или разработчику.
Исправлена проблема прокрутки привязки заголовка после настройки порога LazyLoad
Наконец, у нас возникла еще одна проблема, которая, как мы предполагаем, будет общей проблемой Divi Them.
Поскольку у нас есть фиксированный заголовок на нашем веб-сайте, даже когда мы изменили пороговое значение LazyLoad на 0 пикселей, на самом деле оставалось 65 пикселей от верхней части области просмотра из-за размера нашего фиксированного заголовка.
Это зависит от настроек и настроек вашей темы.
Нашим простым решением было добавить отступ 65 пикселей под каждым изображением, на котором возникает эта проблема, и использовать отступ 30 пикселей для изображений на планшетах и мобильных устройствах, поскольку фиксированный заголовок работает только на рабочем столе, если только вы не настроили свой CSS заголовка.
Опять же, это стилистический компромисс, и его необходимо оценивать на основе предпочтений и потребностей вашего веб-сайта.
Ниже мы покажем, где добавить поле изображения для рабочего стола и планшета/мобильного устройства, и, если у вас есть несколько таких разделов, как быстро скопировать и вставить этот параметр в другие изображения.
Divi Image Margin для устранения проблемы с отложенной прокруткой загрузки
Напоминаем, что для нашего сайта, на котором вы сейчас находитесь, мы использовали размер 65 пикселей из-за высоты нашей фиксированной панели навигации, поэтому настройте ее в соответствии со своими настройками.
Мобильное поле изображения Divi для устранения проблемы прокрутки заголовка с отложенной загрузкой
Мы изменили поле для планшета/мобильного устройства на 30 пикселей, поскольку дополнительное поле не требуется в представлении для планшета/мобильного устройства, поскольку нет фиксированного заголовка.
Скопируйте настройки поля изображения, если вам нужно применить ко многим изображениям
Просто полезная экономия времени, если вы хотите/нужно применить этот параметр к нескольким изображениям на вашем сайте Divi, вы можете щелкнуть правой кнопкой мыши заголовок «Поле». и нажмите «Копировать поле».
Вставьте поле изображения
Как и в предыдущем случае, вы можете щелкнуть правой кнопкой мыши на любом из ваших элементов изображения, чтобы вставить такое же поле.
Резюме
Надеемся, что это облегчит боль многим разработчикам, столкнувшимся с этой проблемой, поскольку мы знаем, что это было долгое исследование, чтобы исправить это для нас.
В конечном счете, потребуется немного поэкспериментировать, чтобы увидеть, какая комбинация этих различных параметров лучше всего подходит для вас и вашего веб-сайта.
Divi, если вы читаете, было бы здорово, если бы Divi сделала скорость плавной прокрутки регулируемой в будущем, однако даже в этом случае возникнут другие конфликты, перечисленные выше.
Пожалуйста, дайте нам знать, если у вас есть какие-либо проблемы или комментарий ниже.
Если вам интересно подписаться на наши будущие обновления, мы рассылаем регулярные еженедельные разработки, а также функции и рекомендации Divi в наших электронных письмах с обновлениями.
Наконец, если какой-либо (или весь) этот пост был ошеломляющим, пожалуйста, свяжитесь с нами, и мы всегда рады предоставить индивидуальную поддержку для любых потенциальных будущих партнеров.
Спасибо за внимание!
П.С. Примечание для других разработчиков…
В качестве краткой справки: это первое реальное исправление, которое мы увидели онлайн для этой внутренней проблемы в Интернете. Если вы бились головой о стену (как и мы), вот список других исправлений, которые мы безуспешно пробовали. Надеюсь, это сэкономит вам время, если вы не хотите использовать что-либо из вышеперечисленного.
1. Исключение изображения по классу
WP-Rocket позволяет пользователям исключать изображения из LazyLoad по классу img (подробности здесь), однако в настоящее время нет способа (по крайней мере, в Divi) добавить класс НЕПОСРЕДСТВЕННО к изображению — класс добавляется в родительский Div, что не помогает.