Главная / Уроки / Elementor / Кнопка вверх в Elementor без плагина

Кнопка вверх в Elementor без плагина

Кнопка вверх для сайта
Содержание

В этом уроке мы сделаем кнопку вверх в Elementor Free и Pro. Также мы добавим ей свойства плавного возврата вверх и исчезания. Способов это сделать много, но мы рассмотрим 2.

Кнопка вверх (вариан 1 - с использованием скрипта и css)

Этот способ подойдёт для бесплатной и платной версии Elementor.

Если сайт многостраничный, то кнопку надо разместить в футере сайта.

Если у вас Elementor Free, то вам понадобится плагин Footer, Header and Blocks или аналогичный.

Итак, заходим в редактор футера, выбираем виджет "кнопка" и вставляем его в любое место.

Также можно использовать виджет "иконка" или "изображение" - принцип аналогичный.

Настраиваем нужный внешний вид и в поле ссылка прописываем -#top

blank

Затем переходим во вкладку "расширенные" и прописываем CSS класс - backtotop

blank

Переходим в раздел "Позиционирование" и выставляем следующие настройки:

  • Ширина: друг за другом
  • Позиционирование: фиксированное
  • Горизонтальная ориентация: по правому краю (смещение 40)
  • Вертикальная ориентация: по нижнему краю (смещение 20)
настройки кнопки

Далее нам нужно использовать скрипт. Для этого берем виджет "HTML" и также добавляем его в любое место в футере. Прописываем там следующий код:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//момент появления кнопки
var offset = 300
$(window).on('load scroll', function(){
    
    if( $(window).scrollTop() > offset ){
        $('body').addClass('show')
    }else{
        $('body').removeClass('show')
    }
})
//плавный возврат
$(function() {
    $('.backtotop').click(function(){
       $('html, body').animate({scrollTop:0}, 'slow');
   });
});
</script>

Данный скрипт использует библиотеку Jquery, которая в нашем варианте подключается из внешнего источника. Если вы в этом разбираетесь, то лучше загрузить jquery на ваш хостинг и подключить её оттуда. В этом случае первая строчка будет выглядеть как-то так

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

В конце нам надо прописать CSS стили.

.backtotop {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show .backtotop{
    opacity: 0.6;
}

Прописать CSS код обычно можно в настройках темы.

настройка стилей

В Elementor Pro стили можно прописать прямо в виджете кнопки. Для этого используйте следующий код:

selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 0.6;
}

Кнопка наверх (вариан 2 - только для Elementor Pro)

В этом варианте нам не понадобятся никакие скрипты и дополнительные CSS стили - всё очень просто.

Как и в первом варианте, мы создаём кнопку и размещаем её в подвале сайта. Прописываем ссылку, например - #scrollup

Настраиваем позиционирование и переходим в раздел "расширенные/эффекты движения". Там включаем прозрачность и настраиваем момент появления.

blank

После этого нам надо перейти в шапку и прописать в самой верхней секции CSS ID - scrollup

На этом всё.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *