В этом уроке мы сделаем кнопку вверх в Elementor Free и Pro. Также мы добавим ей свойства плавного возврата вверх и исчезания. Способов это сделать много, но мы рассмотрим 2.
Кнопка вверх (вариан 1 - с использованием скрипта и css)
Этот способ подойдёт для бесплатной и платной версии Elementor.
Если сайт многостраничный, то кнопку надо разместить в футере сайта.
Если у вас Elementor Free, то вам понадобится плагин Footer, Header and Blocks или аналогичный.
Итак, заходим в редактор футера, выбираем виджет "кнопка" и вставляем его в любое место.
Также можно использовать виджет "иконка" или "изображение" - принцип аналогичный.
Настраиваем нужный внешний вид и в поле ссылка прописываем -#top
Затем переходим во вкладку "расширенные" и прописываем CSS класс - backtotop
Переходим в раздел "Позиционирование" и выставляем следующие настройки:
- Ширина: друг за другом
- Позиционирование: фиксированное
- Горизонтальная ориентация: по правому краю (смещение 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
Настраиваем позиционирование и переходим в раздел "расширенные/эффекты движения". Там включаем прозрачность и настраиваем момент появления.
После этого нам надо перейти в шапку и прописать в самой верхней секции CSS ID - scrollup
На этом всё.
