Кнопки для сайту dle

Отже, ми вирішили в якості прикладу додати кнопку вгору для нашого сайту на движку DLE. Це досить зручна для користувачів можливість, оскільки кнопка вгору дозволяє швидко піднятися в самий початок сайту (вгору) з будь-якої точки сайту. Особливо ця можливість актуальна для мобільних версій сайту, де екран досить вузький і контент сторінки може займати кілька екранів. У цьому випадку користувач буде позбавлений від гарячкового гортання екрана з метою дістатися до меню або будь-якого іншого елемента, який знаходиться у верхній частині сторінки. За нього це зробить функціонал, закладений в кнопку.

Також ця можливість актуальна для сайтів з великою кількістю контенту. Загалом, штука корисна і зручна. До слова, в шаблоні Default, який йде з коробки з двигуном DLE, така кнопка є. Ось тільки зроблена вона не зовсім вдало. По-перше, на мобільній версії сайту її чомусь прибрали. По-друге, на десктопах вона знаходиться в самому низу сторінки, тобто, якщо ми знаходимося десь в середині тематичної сторінки, то ця кнопка для нас просто недоступна.

Хотілося б все ж, щоб ця кнопка з'являлася не в самому кінці сторінки, а була доступна нам практично завжди. Ну і, звичайно ж, непогано було б, щоб ця кнопка була доступна і на мобільній версії сайту. Давайте спробуємо зробити це.

Я використовую вже наявну кнопку, яку показав на скріншоті вище, проте можна використовувати і власну кнопку за бажанням. Давайте подивимося код кнопки через консоль розробника.

Як бачимо, кнопка має ідентифікатор upper, для якого описані відповідні стилі. Для того, щоб кнопка показувалася не тільки в кінці сторінки, нам необхідно прописати для неї фіксоване позиціонування і вказати відповідний відступ знизу. Зробимо це в файлі style.css.

Тепер кнопка доступна з будь-якої позиції сторінки, оскільки ми задали для неї фіксоване позиціонування і відступ знизу і праворуч по 50 пікселів.

Наступним кроком буде показати кнопку тільки починаючи з певної позиції, скажімо починаючи з 200 пікселів прокрутки від верху сторінки. Тобто, спочатку кнопка буде не видна, але після 200 пікселів прокрутки ми її покажемо. Для цього в тих же стилях спочатку приховуємо кнопку, додавши просте правило display: none;

Тепер напишемо нескладний скрипт, який покаже кнопку при Скролл сторінки. Зробити це можна в окремому файлі js, який можна підключити до сторінки. Також можна використовувати існуючий файл або прописати потрібний код в шаблоні. Я зупинюся на останньому варіанті, тим більше що в шаблоні main.tpl вже є js код. Допишемо наш код:

Суть коду досить проста. При подію скролла ми перевіряємо відступ зверху і, якщо він більше 200 пікселів, тоді ми показуємо кнопку, в іншому випадку - приховуємо її. Ну а при кліці по самій кнопці анімується скролл вгору за 700 мілісекунд.

Залишилося зробити доступною кнопку і для мобільних пристроїв. Насправді ховається не кнопка, а блок, в якому ця кнопка знаходиться. Це блок з класом rightside. Найпростішим варіантом вирішити задачу буде просте видалення класу у цього блоку. Знаходиться блок в шаблоні modules / footmenu.tpl. Відкриємо його і внесемо необхідні правки.

Ну от і все. Тепер кнопка працює як на десктопах, так і на мобільних пристроях. На цьому у мене сьогодні все. Нагадую, що якщо ви хочете більше дізнатися про DLE, тоді познайомтеся з нашим курсом Створення сайту на CMS DLE. Успіхів!

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі