Кнопка вверх

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

Зачем нужна кнопка вверх

Адаптивная верстка своим главным принципом имеет идею вертикального перестроения или vertical stackable. Принцип ее прост: все колонки выстраиваются в одну с использованием алгоритмов упорядочивания (например свойство order flex-модели).

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

Решение сформировалось довольно быстро – знакомая всем кнопка “наверх”. Полный алгоритм ее использования выглядит следующим образом:

• кнопка используется преимущественно в мобильной версии сайта, хотя и для десктопа она будет нелишней,
• классическое размещение кнопки “наверх” – в правом нижнем углу страницы с использованием свойства position: fixed,
• кнопка может оставаться невидимой до тех пор, пока не будет достигнут установленный предел скролла (например пока страница не будет прокручена на 500 пикселей),
• при клике по кнопке наверх (событие click()) происходит скриптовая (jQuery или ванильный JavaScript) прокрутка страницы в самое верхнее положение.

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

Кстати, размещение кнопки и ее форма бывают различными. Кто-то считает что она должна располагаться слева, а в десктопной версии соцсети Вконтакте она представляет собой блок шириной 114px и высотой на всю страницу.

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

Реализация кнопки в начало страницы

Мы пройдем по всем позициям, а необходимость каждой из них вам придется определить самостоятельно. Первым делом разметка. Здесь все просто:

<a href="#" id="ontop" class="d-sm-none">Наверх</a>

Я использовал Bootstrap-класс .d-sm-none чтобы скрыть ее на разрешениях с шириной документа более 575px. Стили также не вызывают проблем:

a#ontop { visibility: hidden; opacity: 0; position: fixed; bottom: 2rem; right: 1rem; z-index: 100; }
body#scrolled-down a#ontop { visibility: visible; opacity: 1; }

Изначально кнопка скрыта. Скриптом включаем отображение при начале прокрутки:

$(window).scroll( function() {
  if ($(document).scrollTop() == 0) {
    $('body').removeAttr('id');
  } else {
    $('body').attr('id', 'scrolled-down');
  };
}

Теперь по скрипту. Это может быть более понятный и доступный вариант на jQuery или более популярный сегодня ванильный JavaScript. Начнем с первого:

$('a#ontop').on({
  click: function(e) {
    e.preventDefault();
    $("html, body").animate({
      scrollTop: 0
    }, 1000);
  }
});

Базовая опция на Javascript выглядит так:

let scrolltop = document.getElementById("ontop");
scrolltop.onclick = function(e) {
  e.preventDefault();
  document.documentElement.scrollTop = 0;
}

Но сегодня рекомендуемым и безопасным явлется метод window.scrollTo(), который и обладает лучшей совместимостью и позволяет скроллить плавно (параметр behaviour):

let scrolltop = document.getElementById("ontop");
scrolltop.onclick = function(e) {
  e.preventDefault();
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

Как видим, ничего сложного или ресурсоемкого.

Альтернативы и варианты размещения кнопки сколла наверх

Наблюдения показывают, что в природе существуют персонажи, которые категорически не приемлют кнопку наверх. Я уважаю любые мнения, хотя неаргументированная категоричность с претензией на всеобщую истину сильно настораживает.

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

По логике вещей, желание вернуть страницу наверх можно определить по одному простому алгоритму:

1. Если посетитель скроллит страницу вниз, он счастлив. Ему не нужны ни sticky header, ни кнопка наверх.
2. Как только он начнет скроллить вверх, это можно считать нужным моментом для отображения кнопки возврата к началу страницы или, например, sticky header / footer.

Что вы предложите пользователю, решайте самостоятельно. А JavaScript-код для данного трюка будет следующим:

// Hide block on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var target = $('nav#mainnav');
var targetHeight = target.outerHeight();

$(window).scroll(function(event) {
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 250);

function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure scroll exceeds delta
  if (Math.abs(lastScrollTop - st) <= delta) {
    return;
  }

  // If user scrolled down past the navbar, add class .hide-me
  // so that you never see what is behind the navbar.
  if (st > lastScrollTop && st > targetHeight) {
    // Scroll Down
    target.removeClass('show-me').addClass('hide-me');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      target.removeClass('hide-me').addClass('show-me');
    }
  }
  lastScrollTop = st;
};

Код создавался для хедера, но подойдет и для кнопки “вернуться в начало страницы”.

Заключение

UI/UX-ориентированный дизайн это не бином Ньютона, а набор достаточно простых, но вполне функциональных приемов и решений, которые способны не только облегчить использование вашего сайта пользователем, но и сделать этот процесс более эффективным и достигающим максимального количества целей.

Мы обязательно продолжим эту тему в будущих публикациях, а пока предложим обсудить достоинства и недостатки CRM-систем.