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

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