Лучшие бесплатные плагины WordPress Smooth Scroll 2022
Опубликовано: 2021-11-09
Если вы создали веб-сайт, но его содержимое слишком длинное, и его сложно понять в этой ситуации, вы можете использовать плагины WordPress Smooth Scroll.
Плагины плавной прокрутки WordPress помогут вам очень плавно прокручивать сайт вверх и вниз. Это не только улучшит пользовательский интерфейс вашего сайта, но и значительно повлияет на коэффициент конверсии. Потому что ваш пользователь будет заниматься на вашем сайте в течение более длительного времени.
Как добавить эффект плавной прокрутки вверх в WordPress с помощью jQuery?
Вам интересно, почему на различных других веб-сайтах есть эффект плавной прокрутки вверх страницы? Он идеально подходит для добавления эффекта плавной прокрутки, если у вас длинная страница.
Это помогает улучшить взаимодействие пользователей с вашей страницей и в то же время облегчает им быстрый возврат наверх.
Теперь вопрос в том, как добавить плавную прокрутку к верхнему эффекту на вашем сайте WordPress? Ну, вы можете легко сделать это с помощью jQuery. Здесь мы поговорим о том, как легко это сделать с помощью jQuery. Читать дальше:
Что такое Smooth Scroll и когда его использовать?
Если на странице или в публикации много контента, пользователям необходимо прокрутить страницу вниз, чтобы прочитать их все. Когда пользователи начинают прокручивать страницу вниз, ваши навигационные ссылки начинают подниматься вверх.
Когда пользователь закончит чтение, он должен прокрутить страницу, чтобы увидеть, не осталось ли ему/ей чего-нибудь. Прокрутка до верхней кнопки позволяет читателю быстро перейти к операции. Вы можете добавить эту текстовую ссылку без использования jQuery.
<a href="#" title="Наверх">^Наверх</a>
Он будет отправлять читателей в верхнюю часть страницы при прокрутке вверх в течение доли секунды. Он работает как функциональный.
Однако плавная прокрутка противоположна этому. Плавная прокрутка помогает пользователю вернуться в верхнюю часть страницы. Это помогает улучшить опыт пользователей на вашем сайте.
Добавление эффекта плавной прокрутки вверх с помощью jQuery в WordPress?
Если вы хотите добавить к верхнему эффекту плавную прокрутку, вы можете использовать jQuery. Одновременно вам нужно будет добавить немного CSS вместе с одной строкой HTML-кода на тему вашего WordPress.
Для начала вам нужно открыть текстовый редактор, например Блокнот. Теперь вам нужно создать файл и сохранить его как smoothscroll.js. Теперь вам нужно скопировать код в область файла:
jQuery (документ) .ready (функция ($) {
$(окно).scroll(функция(){
если ($(это).scrollTop() < 200) {
$('#smoothup') .fadeOut();
}
еще {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('щелчок', function(){
$('html, body').animate({scrollTop:0}, 'fast');
вернуть ложь;
});
});
Теперь нужно сохранить файл. После этого вы можете загрузить его в каталог темы WordPress /js/folder. Если в вашей теме нет каталога /js/, вам нужно начать с его создания.
После этого вы можете загрузить smoothscroll.js в этот каталог. Этот код называется скриптом jQuery, который добавит к кнопке эффект плавной прокрутки. По сути, это поможет пользователю плавно перейти к началу страницы.
После этого вам нужно добавить этот smoothscroll.js в область вашей темы. Если вы хотите сделать это, вам нужно добавить скрипт в файл WordPress. Вот скрипт или код, который вам нужно вставить в файл functions.php вашей темы:
wp_enqueue_script('сглаживание', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery'), ”, true );
Этот код отправляет WordPress команду script. В то же время он также сообщает WordPress загрузить библиотеку jQuery, поскольку плагин зависит от нее.
Поскольку вы закончили с добавлением части jQuery, теперь вам нужно добавить фактическую ссылку на сайт wordpress, которая вернет пользователя в верхнюю область. Вам нужно вставить HTML-код в любом месте файла footer.php вашей темы:
<a href="#top" title="Наверх"></a>
Этот шаг включает в себя добавление ссылки на файл, но он не связан с каким-либо текстом. Это так, потому что вам нужно использовать значок изображения для стрелки вверх, которая позволит вам отобразить кнопку «Вверх».
Вот как вы можете добавить значок 40x40px в таблицу стилей вашей темы:
#сглаживание {
высота: 40 пикселей;
ширина: 40 пикселей;
положение: фиксированное;
внизу: 50 пикселей;
справа: 100 пикселей;
отступ текста:-9999px;
дисплей:нет;
background: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0,4 с;
-moz-transition-duration: 0,4 с; продолжительность перехода: 0,4 с;
}
#сглаживание: наведение {
-webkit-transform: повернуть (360 градусов) }
фон: url('') без повтора;
}
В вышеупомянутом CSS вы выбрали обледенение положения значка изображения. Это также включает использование значка изображения в качестве фонового изображения. Теперь вам нужно загрузить значок изображения с помощью загрузчика мультимедиа WordPress.
Затем вы можете получить URL-адрес изображения, который необходимо вставить в качестве фонового URL-адреса. Поскольку вы добавили анимацию CSS к кнопке, которая продолжает вращать кнопку, пользователь удерживает указатель мыши над кнопкой.
Теперь вам нужно прокрутить до верхнего эффекта, который позволит пользователям вернуться в верхнюю область и найти, что еще они могут сделать на вашем сайте.
Вы также можете добавить плавающий нижний колонтитул, чтобы содержимое функции было удобно отображать. Если вы не хотите, чтобы ваши пользователи прокручивали страницу вверх, чтобы поделиться статьей, вы можете использовать плагин плавающей панели социальных сетей, чтобы сделать ее более управляемой.
Плагины плавной прокрутки 2022 года — очень легкие и быстрые
Плагины плавной прокрутки WordPress, безусловно, будут работать намного быстрее и эффективнее на всех других устройствах и браузерах без каких-либо затруднений.
Кроме того, он отлично работает с другими плагинами, такими как Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, конструкторами страниц SKT, Visual Composer и Elementor и многими другими.
Веб-сайты крупного бизнеса или малого бизнеса, такие как блог, веб-сайт портфолио, консультационный веб-сайт, корпоративный веб-сайт, веб-сайт, связанный с электронной коммерцией, креативное агентство, веб-сайт недвижимости, личное резюме, веб-сайт розничной компании и т. д. Можно использовать плагины WordPress Smooth Scroll для улучшения внешний вид сайта.
Доступно множество бесплатных плагинов WordPress Scroll, но мы выделили большинство плагинов Smooth scroll, которые понравятся всем вашим посетителям. Пожалуйста, проверьте ниже.
1. Прокрутка страницы до идентификатора:
Page scroll to id — это программное обеспечение с открытым исходным кодом, полностью охарактеризованное и снабженное хорошо разработанными функциями и функциями. Это дает вам плавный эффект анимации прокрутки.
Прокрутка страницы до плагина id регулируется. С помощью упомянутых id и offset этот плагин рассчитает размер страницы и установит его автоматически.
2. Липкое меню (или что угодно!) при прокрутке:
Липкое меню (или что-то еще) в плагине прокрутки доступно бесплатно. это поможет вам сделать меню или любой элемент липким. Как только вы нажмете на липкий элемент, он прокрутит вас прямо вверх страницы. Вам просто потребовались некоторые или базовые знания HTML/CSS, чтобы просто взять правильный элемент, который вы хотите сделать липким.
3. WordPress Infinite Scroll — Ajax Load More:
Ajax Load more специально создан для пользователей WordPress, чтобы они могли плавно прокручивать сайт. Ajax load more помогает загружать ленивые посты, отдельные посты, страницы и комментарии. Эти плагины наиболее известны для плагинов электронной коммерции, таких как WooCommerce.
4. Легкие гладкие ссылки прокрутки:
Вы можете создать функцию снизу вверх самостоятельно. потому что SEasy Smooth Scroll Links — это настраиваемый и очень легкий плагин.
Вам просто нужно выбрать любое из изображений, чтобы установить элементы прокрутки вверх. Также вы можете настроить положение элемента слева, по центру, справа. Этот плагин также является программным обеспечением с открытым исходным кодом.
5. Плавная прокрутка колесиком мыши:
Плагин MouseWheel Smooth Scroll очень плавно прокручивает все якорные ссылки. Обычно он размещается справа, что позволяет прокручивать страницу снизу вверх.
Следовательно, этот плагин поддерживает RTL и не создает бесполезных пунктов меню на панели управления WordPress.
6. Плавная прокрутка WPOS:
Плагин Smooth Scroll by WPOS имеет небольшой вес, поэтому можно легко настроить прокрутку сверху вниз на каждой странице. Вам не нужно писать даже одну строчку кода.
Можно настроить скорость анимации, тип, высоту, ширину и т. Д. В соответствии со своими потребностями. Этот плагин лучше работает с конструктором страниц Elementor.
7. Простая прокрутка до верхней кнопки:
К якорной ссылке можно добавить эффект плавной прокрутки, но на той же странице. Эти эффекты могут быть применены ко всем сообщениям и странице или к отдельным сообщениям и страницам. Вы можете найти этот параметр в настройках панели инструментов >> Простая прокрутка до верхней кнопки.
- Выберите, чтобы подать заявку на все сообщения и страницы
– Выбрать только домашнюю страницу
- Выберите только определенные страницы
- Выберите только определенные сообщения
- Определите скорость прокрутки
8. NS Гладкая прокрутка вверх:
У Surbma более активные пользователи. Так как этот плагин тоже плавный скролл. Вы можете получить эффект для каждой якорной ссылки на вашем сайте. Эффект плавной прокрутки можно добавить в меню или в любую часть навигации.
Вам даже не нужно настраивать его, потому что для этого плагина нет опций. Если у вас есть знания и опыт программирования на JavaScript и WordPress, вы можете внести некоторые изменения в соответствии с вашими потребностями. Но если у вас нет, я предлагаю вам не трогать его. так как он начнет работать сразу после установки.
9. WPFront Scroll Top:
Вы можете легко прокручивать страницу снизу вверх с помощью плагина WPFront Scroll Top. Это полностью настраиваемый с различными вариантами на выбор. С некоторой анимацией он будет прокручиваться обратно вверх.
Вы можете создавать текст, изображения и кнопки самостоятельно. также вы можете фильтровать страницы и сообщения.
10. Поймать бесконечный свиток:
Catch Infinite Scroll поможет вам повысить вовлеченность пользователей на вашем сайте. Основная причина этого — бесконечная прокрутка Jetpack. Как только ваши плагины будут установлены и активированы, ваш клиент и пользователь смогут прокручивать страницу веб-сайта.
Это все лучшие бесплатные плагины WordPress Smooth Scroll 2022 года.