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

Рубрика: CMS MaxSite;
Метки: |
Кнопка возврата в начало страницы!

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

Давайте сегодня поговорим об одной очень интересной вещице, которая делает удобнее блог для пользователей. Это скрипт, который вступает в свою работу, когда пользователь читая статью проматывает страницу ниже середины. Называется по английски этот скрипт Scroll To Top, ну а по русски говоря Возврат в начало страницы. Данный скрипт универсальный и подходит для любой CMS, но мы будем рассматривать на примере моей любимой MaxSite CMS!

Давайте приступим.

Шаг №1 - Подготовка

Сначала подключаемся к хостингу, через файловый менеджер, например FileZilla.

Следующий шаг, открываем папку с шаблоном сайта на MaxSite CMS - путь примерно получится такой

/application/maxsite/templates/ПАПКА ШАБЛОНА/stock - вот именно в этой папке stock и будем производить все манипуляции!

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

В папке stock создаем еще одну папочку, с названием scroll-to-top

После этого в папке scroll-to-top создаем папку с названием images в этой папке будет храниться стрелочка, которая будет указывать Вверх.

Ну что ж, думаю с подготовительными работами завершили wink Осталось самое главное - это скопировать код, для стрелочки и положить картинку стрелки в папку 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-top17.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-top17.png себе на компьютер.

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

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

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

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

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

Комментариев: 5 RSS

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Комментариев: 5
  •  Dobit | 3 октября 2013 в 21:35:55

    Здравствуйте!НЕ знаю куда написать,поэтому спрошу здесь.

    Только изучаю данную cms и заметил,что тайт статьи и тайтл страницы одинаковые,а плагин отдельный,что то не могу найти.

    Есть ли возможность и данной системы прописывать отдельный тайтл для страницы. Так как я занимаюсь сео,это очень важно для меня

  •  Серёга | 4 октября 2013 в 14:15:28

    При создании статьи есть поле для задания title

    Если его не заполнять, автоматически будет такой же title как и у названия статьи.

  •  Zheka Miroshnichenko | 27 октября 2013 в 02:32:13

    Доброго времени суток.

    Забыли написать, что нужно вставить код в footer шаблона

    if (file_exists(getinfo('template_dir') . 'stock/scroll-to-top/scroll-to-top.php'))
    require(getinfo('template_dir') . 'stock/scroll-to-top/scroll-to-top.php');

    ибо не во всех шаблонах это есть )

  •  Сергей | 3 марта 2014 в 21:35:11

    Здравствуйте - все сделал - спасибо. А как прописать чтобы кнопка была не внизу страницы - а в верхнем углу?