Кнопка возврата в начало страницы!

Привет друзья! Как Ваше настроение? На связи с Вами Лобанов Кирилл.

Давайте сегодня поговорим об одной очень интересной вещице, которая делает удобнее блог для пользователей. Это скрипт, который вступает в свою работу, когда пользователь читая статью проматывает страницу ниже середины. Называется по английски этот скрипт 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 - Пишем код

Сейчас нужно открыть редактор кода Notepad++, либо любой другой удобный для Вас редактор, кроме "Блокнот"!!!

Создаем в редакторе новый файл и называем его scroll-to-top.php - обратите внимание, чтобы Ваше название, было точь в точь таким же! Лучше всего скопируйте его отсюда! И сохраните этот файл в папку scroll-to-top

В результате у Вас на хостинге должен быть примерно такой путь до файла:

/application/maxsite/templates/ПАПКА ШАБЛОНА/stock/scroll-to-top/scroll-to-top.php

Дальше будем писать код в открытом файле scroll-to-top.php

В самом начале файла прописываем вот такую конструкцию:

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');?>

Далее пишем HTML-код для стрелки, чтобы MaxSite CMS понимал, где ее нужно расположить.

На следующей строке в файле scroll-to-top.php прописываем вот такую конструкцию:

<div id="to_top" style="position: fixed; right: 15px; bottom: 30px; width: 32px; height: 32px; cursor: pointer; background: url(<?= getinfo('template_url') ?>stock/scroll-to-top/images/scroll-to-top17q.png) no-repeat; background-size: 32px 32px;" title="Вверх!"></div>

Дальше нужно прописать код, для анимации и плавного возврата в начало страницы.

Прописываем вот этот код:

<script>
$("#to_top").hide();
$(function () {$(window).scroll(function () {if ($(this).scrollTop() > 300) {$("#to_top").fadeIn();} else {$("#to_top").fadeOut(); } }); $("#to_top").click(function() {$("body,html").animate({scrollTop: 0}, 800); return false; }); });
</script>

После этого нужно сохранить файл.

Шаг №3 - Украшаем

Теперь совершаем самый последний шаг, это нужно найти картинку стрелки вверх размером 32x32 и обязательно PNG.

Нажмите здесь, чтобы перейти на сайт, где я нашел для Вас широкий выбор стрелок.

Теперь сохраняете выбранную стрелку с именем scroll-to-top17q.png себе на компьютер.

Дальше загружаете на хостинг по адресу

/application/maxsite/templates/ПАПКА ШАБЛОНА/stock/scroll-to-top/images

На всякий случай прикладываю исходные файлы, скачать их можно здесь!

Оставляйте Ваши комментарии и нажимайте кнопки соц.сетей!

С уважением, Лобанов Кирилл.