Привіт друзі! Як ваш настрій? На зв'язку з Вами Лобанов Кирило.
Давайте сьогодні поговоримо про одну дуже цікавою штучці, яка робить зручніше блог для користувачів. Це скрипт, який вступає в свою роботу, коли користувач читаючи статтю розтратив сторінку нижче середини. Називається по англійськи цей скрипт Scroll To Top. ну а по російськи кажучи Повернення в початок сторінки. Даний скрипт універсальний і підходить для будь-якої CMS, але ми будемо розглядати на прикладі моєї улюбленої MaxSite CMS!
Крок №1 - Підготовка
Спочатку підключаємося до хостингу, через файловий менеджер. наприклад FileZilla.
Наступний крок, відкриваємо папку з шаблоном сайту на MaxSite CMS - шлях приблизно вийде такий
/ Application / maxsite / templates / папки Шаблони / stock - ось саме в цій папці stock і будемо виробляти все маніпуляції!
Тепер будь ласка будьте уважні, щоб у Вас все вийшло з першого разу.
В папці stock створюємо ще одну папочку, з назвою scroll-to-top
Після цього в папці scroll-to-top створюємо папку з назвою images в цій папці буде зберігатися стрілочка, яка буде вказувати Вгору.
Ну що ж, думаю з підготовчими роботами завершили Залишилося найголовніше - це скопіювати код, для стрілочки і покласти картинку стрілки в папку images.
Давайте приступимо до цього етапу.
Крок №2 - Пишемо код
В результаті у Вас на хостингу повинен бути приблизно такий шлях до файлу:
Далі будемо писати код у відкритому файлі scroll-to-top.php
На самому початку файлу прописуємо ось таку конструкцію:
Далі пишемо HTML-код для стрілки, щоб MaxSite CMS розумів, де її потрібно розташувати.
На наступному рядку у файлі scroll-to-top.php прописуємо ось таку конструкцію:
Далі потрібно прописати код, для анімації і плавного повернення в початок сторінки.
Прописуємо ось цей код:
Після цього потрібно зберегти файл.
Крок №3 - Прикрашаємо
Тепер робимо самий останній крок, це потрібно знайти картинку стрілки вгору розміром 32x32 і обов'язково PNG.
Натисніть тут. щоб перейти на сайт, де я знайшов для Вас широкий вибір стрілок.
Тепер зберігаєте обрану стрілку з ім'ям scroll-to-top17.png собі на комп'ютер.
Про всяк випадок прикладаю вихідні файли, скачати їх можна тут!
З повагою, Лобанов Кирило.