АКЦИЯ! ПРИ ЗАКАЗЕ РАБОТЫ НА СУММУ ОТ 5000 РУБЛЕЙ, НОВОГОДНЕЕ УКРАШЕНИЕ ВАШЕГО САЙТА - БЕСПЛАТНО!

Кнопка «Наверх»

Кнопка наверх страницы поможет пользователям быстро возвращаться к началу страницы. Благодаря этому модулю каждый посетитель сможет быстро переходить по страницам вашего сайта и знакомиться с вашими товарами.

Предупреждение!

Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.

Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе

Как следует из названия, такая кнопка служит для того, чтобы быстро возвращаться наверх страницы.


Приготовления

Создаем в шаблоне сниппет с названием, например “to_top”.

Подключаем CoffeScript, создаем теги ссылки, стиля и скрипта:

<a href="#" class="to_top"></a>
<style>
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/jashkenas/coffeescript/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
</script>
<a href="#" class="to_top"></a>
https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>">

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

Подключим сниппет в шаблоне “layout” перед закрывающим тегом body.

{% include 'to_top' %}


Стили

Устанавливаем фиксированную позицию для ссылки, положение в 50 пикселей от нижнего и правого края документа, ширину и высоту ссылки, затем скрываем ее. В качестве фонового изображения устанавливаем любое изображение стрелочки, которое нравится. Чтобы страница грузилась быстрее, экономим лишний http запрос и кодируем картинку в формат base64, с помощью любого онлайн конвертера.

.to_top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 51px;
    height:  51px;
    display: none;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAclJREFUeNrsmbFqwkAYx5NTtBZsOxSXQsFqh0LH4lwcFByb1q1Tn6JP4tYXaNIH6OBjdAlS6OomYrUU9X/wBUKIqcTc1QvfBz8Id5fzfuffkETbdV0LdQQ64JyOTakJ+ALvjuNMijg4BU+gYplXcuOvQcPzvBeBg7ahIuGS629LmQsrH9WQMgc5kSkJK0fFMizDMizDMiyjsooaPmMOXun4QeUdh+pv5ht4YER41GaczAK8AT/U5lPbwiQZGS03IhIWcmnM3ssE0fITxvgqIic0RCtJKNPICU3RShLKLHJCY7SUR05ojpbSyIl/iJayyO0iM9shWn9FbqZbZpto2Vu2xUVOq8xxQp98j3W74d6vSH2VlHMrkemBVkz7IeiDK7CM6V9SX5/GRqtFc2uVKYBuRKgM7kAd/IJVzHkr6qvT2HJEpEtza7+aFWgXb0AV3INmaNGbKuhr0jlVmqOXViTL55kO7WotxbmX4BGc7MvDWSmlSFC1LBbB7wBYhmX2S2a1ZVsmpfJVk01XuWXMBtqmyZyBZ/7NsAzLsAzLsEyeZOY5cfmRMp85kRlJmaGl8N8sTSXXP5QyYzAAH2BqmMSU1j1wHGe8FmAAYP5lQb2qms4AAAAASUVORK5CYII=');
    }


Логика

Изначально стрелка скрыта, если страница находится в верхнем положении, однако должна появляться если страница загружается на середине, или отматывается скроллом. При пролистывании страницы в исходное положение, должна снова изчезать. Так же, кнопка должна срабатывать при нажатии.

Добавляем скрипт.

$ ->
  to_top = $('.to_top')
  to_top_engine = ->
    unless $(@).scrollTop() is 0
      to_top.fadeIn()
    else
      to_top.fadeOut()  
  to_top_engine()
  $(window).scroll ->
    to_top_engine()
  to_top.on 'click', (e) ->
    e.preventDefault();
    $('body').animate {scrollTop:0}, 800

Для соблюдения принципа DRY (Do not repeat yourself), создана функция to_top_engine, которая вызывается при загрузке страницы и каждый раз при срабатывании события scroll. При клике на кнопку срабатывает анимация.


Результат

На этом этапе сниппет должен выглядеть так:

<a href="#" class="to_top"></a>
<style>
.to_top {
    position: fixed;
    right: 50px;
      bottom: 50px;
    width: 51px;
    height:  51px;
      display: none;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAclJREFUeNrsmbFqwkAYx5NTtBZsOxSXQsFqh0LH4lwcFByb1q1Tn6JP4tYXaNIH6OBjdAlS6OomYrUU9X/wBUKIqcTc1QvfBz8Id5fzfuffkETbdV0LdQQ64JyOTakJ+ALvjuNMijg4BU+gYplXcuOvQcPzvBeBg7ahIuGS629LmQsrH9WQMgc5kSkJK0fFMizDMizDMiyjsooaPmMOXun4QeUdh+pv5ht4YER41GaczAK8AT/U5lPbwiQZGS03IhIWcmnM3ssE0fITxvgqIic0RCtJKNPICU3RShLKLHJCY7SUR05ojpbSyIl/iJayyO0iM9shWn9FbqZbZpto2Vu2xUVOq8xxQp98j3W74d6vSH2VlHMrkemBVkz7IeiDK7CM6V9SX5/GRqtFc2uVKYBuRKgM7kAd/IJVzHkr6qvT2HJEpEtza7+aFWgXb0AV3INmaNGbKuhr0jlVmqOXViTL55kO7WotxbmX4BGc7MvDWSmlSFC1LBbB7wBYhmX2S2a1ZVsmpfJVk01XuWXMBtqmyZyBZ/7NsAzLsAzLsEyeZOY5cfmRMp85kRlJmaGl8N8sTSXXP5QyYzAAH2BqmMSU1j1wHGe8FmAAYP5lQb2qms4AAAAASUVORK5CYII=');
    }
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/jashkenas/coffeescript/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$ ->
  to_top = $('.to_top')
  to_top_engine = ->
    unless $(@).scrollTop() is 0
      to_top.fadeIn()
    else
      to_top.fadeOut()  
  to_top_engine()
  $(window).scroll ->
    to_top_engine()
  to_top.on 'click', (e) ->
    e.preventDefault();
    $('body').animate {scrollTop:0}, 800     
</script>

Кнопка на сайте:


Итог

Теперь все работает, осталось скомпилировать скрипт. Стоит отметить, что так-как скрипт находится в конце страницы и не выполняется при загрузке, делать это не обязательно, однако ради одной функции не стоит загружать целую библиотеку, к тому же наличие исходного кода для этого скрипта не имеет смысла, потому, что впоследствии он вряд ли будет редактироваться. Вот как должен выглядеть полностью готовый сниппет:

Заключение

Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.

Закажи установку модуля: Кнопка «Наверх» для своего магазина

Установка модуля от разработчиков InsalesThemes!
  • Удобные настройки модуля
  • Пожизненная гарантия на работу
  • Быстро и качественно
Успейте заказать установку модуля по специальной цене. Количество ограничено!
Закрыть

Ваша заявка отправлена!

В ближайшее время Вам на почту придет уведомление, а в течении нескольких часов мы свяжемся с Вами и уточним все детали по работе. Имейте ввиду - мы работает с понедельника по пятницу с 10:00 - до 19:00 по МСК