Кнопки для сайта DLE
29 Мая 2022г. в 04:33Итак, мы решили в качестве примера добавить кнопку вверх для нашего сайта на движке DLE. Это достаточно удобная для пользователей возможность, поскольку кнопка вверх позволяет быстро подняться в самое начало сайта (вверх) из любой точки сайта. Особенно эта возможность актуальна для мобильных версий сайта, где экран достаточно узкий и контент страницы может занимать несколько экранов. В этом случае пользователь будет избавлен от лихорадочного пролистывания экрана с целью добраться до меню или любого другого элемента, который находится вверху страницы. За него это сделает функционал, заложенный в кнопку.
Также эта возможность актуальна для сайтов с большим количеством контента. В общем, штука полезная и удобная. К слову, в шаблоне Default, который идет из коробки с движком DLE, такая кнопка есть. Вот только сделана она не совсем удачно. Во-первых, на мобильной версии сайта ее почему-то убрали. Во-вторых, на десктопах она находится в самом низу страницы, то есть, если мы находимся где-то в середине контентной части страницы, то эта кнопка для нас попросту недоступна.
Хотелось бы все же, чтобы эта кнопка появлялась не в самом конце страницы, а была доступна нам практически всегда. Ну и, конечно же, неплохо было бы, чтобы эта кнопка была доступна и на мобильной версии сайта. Давайте попробуем сделать это.
Я использую уже имеющуюся кнопку, которую показал на скриншоте выше, однако можно использовать и собственную кнопку по желанию. Давайте посмотрим код кнопки через консоль разработчика.
Как видим, кнопка имеет идентификатор upper, для которого описаны соответствующие стили. Для того, чтобы кнопка показывалась не только в конце страницы, нам необходимо прописать для нее фиксированное позиционирование и указать соответствующий отступ снизу. Сделаем это в файле style.css.
Теперь кнопка доступна из любой позиции страницы, поскольку мы задали для нее фиксированное позиционирование и отступ снизу и справа по 50 пикселей.
Следующим шагом будет показать кнопку только начиная с определенной позиции, скажем начиная с 200 пикселей прокрутки от верха страницы. То есть, изначально кнопка будет не видна, но после 200 пикселей прокрутки мы ее покажем. Для этого в тех же стилях сначала скроем кнопку, добавив простое правило display: none;
Теперь напишем несложный скрипт, который покажет кнопку при скролле страницы. Сделать это можно в отдельном файле js, который можно подключить к странице. Также можно использовать существующий файл или прописать нужный код в шаблоне. Я остановлюсь на последнем варианте, тем более что в шаблоне main.tpl уже есть js код. Допишем наш код:
$(window).scroll(function () {
if ($(this).scrollTop() > 200) $('#upper').fadeIn();
else $('#upper').fadeOut();
});
$('#upper').click(function () {
$('body, html').animate({
scrollTop: 0
}, 700);
});
1
2
3
4
5
6
7
8
9
$(window).scroll(function () {
if ($(this).scrollTop() > 200) $('#upper').fadeIn();
else $('#upper').fadeOut();
});
$('#upper').click(function () {
$('body, html').animate({
scrollTop: 0
}, 700);
});
Суть кода достаточно проста. При событии скролла мы проверяем отступ сверху и, если он больше 200 пикселей, тогда мы показываем кнопку, в противном случае — скрываем ее. Ну а при клике по самой кнопке анимируется скролл вверх за 700 миллисекунд.
Осталось сделать доступной кнопку и для мобильных устройств. На самом деле скрывается не кнопка, а блок, в котором эта кнопка находится. Это блок с классом rightside. Самым простым вариантом решить задачу будет простое удаление класса у этого блока. Находится блок в шаблоне modules/footmenu.tpl. Откроем его и внесем необходимые правки.
Ну вот и все. Теперь кнопка работает как на десктопах, так и на мобильных устройствах. На этом у меня сегодня все. Напоминаю, что если вы хотите больше узнать о DLE, тогда познакомьтесь с нашим курсом Создание сайта на CMS DLE. Удачи!
