Когда и как ее имеет смысл делать кнопу «наверх»:
1) Только на страницах с длинным контентом. То есть, когда пользователь делает прокрутку в несколько экранов. Для простоты будем считать так: более 5000 пикселов вниз.
2) Ее появление должно быть не раньше, чем эти самые экраны были прокручены. Иначе она не только мешает визуально, но и как бы намекает пользователю «А чего тебе крутить вниз, там ничего интересного, давай-ка вверх» (то есть назад).
3) Размер кнопки должен быть не больше того, что требуется для комфортного нажатия, иначе внимания она на себя заберет слишком много.
4) Хорошо, если кнопка не наезжает на контент, ее место в правом или левом поле от края до контента.
5) Правильный цвет серый, плюс при взаимодействии она не должна менять цвет, размер и прочее. То есть ее дело быть скромной и незаметной, это дополнительный элемент навигации, на нем не должно быть акцента.
6) Очень хорошо, если кнопка начинает показываться не во время прокрутки вниз, а при начале обратной прокрутки вверх.
На мобильном или десктопе?
Лучше и там и там, но только если контента хватает на длинную прокрутку. Например, на моем сайте кнопка только на мобильных, для десктопа как раз недостаточно длинный контент.
Плавающая или нет?
Да, плавающая. Вернуться назад пользователь захочет в любой момент и если мы ее разместим фиксом в конце страницы, то до нее может дело не дойти.
Примеры
Хорошо в конструкторе Wix.
Кнопка только на мобильном, появляется только при скроллинге вверх.
Плохо на сайте Авиасейлз.
Смотреть с десктопа. В мобильной версии (где она нужнее) вместо кнопки у них фильтр.
Вместо резюме или как еще можно вернуться наверх?
На компьютере это сочетание клавиш Ctrl-Home. В некоторых десктопных браузерах клик по активной вкладке. Да, такой навигационный элемент это в чистом виде функция браузера. Например, мобильный Дельфин кнопку формирует сам.
Но, на этот счет браузеры договориться не могут уже который год, вот и приходится владельцам сайтов делать все самим. Так давайте это делать хорошо!
UPD. Яндекс-почта обновилась и у нее появилась кнопка именно такой как не стоит делать — навязчивой, с самого начала скроллинга и далеко от края экрана.
Смотрите также: Как получить максимальный доход с рекламных систем на своем сайте
Комментарии (32)
frees2
28.04.2017 10:21Кнопка эта элемент ранней традиции, как механическая кнопка на самсунге.
Её вполне можно сделать невидимой, разместив в фоне, щёлкнул по части фона и попал на верх.
PS/ Тоже самое в роликах ютуба, которых и тут много, иногда по 4 штуки в статье.
Кликаем на картинку и описание и подгружаем разные видео в один ифрейм.
var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player',{ videoId:'YPv9yKC76hE', playerVars: { autoplay: 1, html5: 1, theme: "light", modesbranding: 0, color: "white", iv_load_policy: 3, showinfo: 0, controls: 2, 'wmode':'opaque', 'list' : ''}, }); } var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
EmmGold
28.04.2017 10:23+3А ещё бывает, тыкаешь в свободном месте экрана, а тебя на верх кидает и кнопки назад нет…
lasthand
28.04.2017 10:33Если речь про вконтакт, то у них повторный клик на этом же пустом месте возвращает в середину ленты.
Но да — клик по пустому месту не должен приводить к спецэффектам вроде прокрутки или попапов.
habradante
28.04.2017 10:36Вот именно, кнопка вредная. Если надо наверх, то быстрее нажать Home, чем смотреть анимацию прокрутки наверх.
lasthand
28.04.2017 10:32> когда пользователь делает прокрутку в несколько экранов
Не соглашусь. Я-пользователь начал крутить ленту, отвлекся, вернулся, хочу подняться вверх — я не помню на сколько экранов я спустился, это может быть половина экрана. Я-пользователь недоумевает, почему не видно привычного элемента навигации, предполагаю поломку.
ivanych
28.04.2017 10:47Хехе:) Ваш комментарий — прямо идеальная иллюстрация вашей же мысли, суть которой «потеря контекста это плохо».
Вы процитировали только часть утверждения из абзаца, и я долго не мог понять, с чем именно вы не согласны. Пришлось возвращаться наверх и искать, о чем именно идет речь в цитируемом абзаце)
И да, я тоже считаю, что кнопка должна быть всегда, чтобы не гадать.lasthand
28.04.2017 10:58И более того — после прокрутки вверх она не должна пропадать. Должна меняться на «вернуться назад». Причем не в самый низ, а туда, откуда я ошибочным кликом или для уточнения контекста сбегал наверх.
На хабре слева почти так работает, но после прокрутки сбивается.
l0ser140
28.04.2017 10:34-1Можно например никогда не использовать?
Что в мобильных, что в настольных браузерах давно есть шорткаты и жесты для того, чтобы вернуться наверх. Да даже кнопка Home на стандартной клавиатуре существует десятилетия.BelkinVadim
28.04.2017 10:47+1Еще бы всех пользователей научить использовать все возможности клавиатуры. Многие из знакомых копировать/вставить через контекстное меню делают, про Home, наверное, даже и не знают.
Oleh_M
28.04.2017 16:04вы даже не представляете как мало людей знает о возможности поднятия вверх в ios (сам узнал пару месяцев назад =) )
Reeze
28.04.2017 11:03На iOS (в Сафари и Firefox точно) тоже можно нажать пальцем над строкой ввода адреса для возвращения к началу.
Поэтому кнопка нужна только тем, кто не знает стандартный функционал браузера.
basili4
28.04.2017 11:13+1На хабре отвратительная кнопка наверх.
- Она не там где должна находится
- Она мешается под мышкой.
пришлось писать скрипт который её удаляет.
ProVal
28.04.2017 11:31+1Этой кнопки на сайтах быть вообще не должно.
Потому что это должен быть универсальный элемент навигации браузера по странице, но никак не костыль сайта (каждого в отдельности, с разным дизайном, расположением в разных местах и даже разным поведением).
Соответственно, на любом сайте (и желательно в любом браузере) этот элемент должен отображаться в одном и том же очевидном месте, примерно там же, где кнопки «назад», «вперёд» и «перезагрузить страницу» и выглядеть всегда одинаково и понятно (в смысле не так, что «если догадаться кликнуть по вкладке или адресной строке в определённой ситуации, то сработает „вверх“, а так, что „вот специальная отдельная кнопка в панели навигации, она всегда выполняет функцию “вверх»"). И ещё эта кнопка должна отключаться в настройках, потому что мне вот она нафиг не нужна.
На мобильных она точно так же не нужна как элемент сайта и должна быть элементом браузера. Хороший пример реализации можно посмотреть в мобильной опере. Кнопка появляется на любом сайте в тот момент, когда начинаем интенсивно скроллить вверх (то есть именно тогда, когда нужна).
Kenya
28.04.2017 11:54Все же не соглашусь, менять состояние кнопки при наведении/клике можно. Как показывает мой небольшой опыт, именно по изменению состояния пользователи определяют, что с элементом можно взаимодействовать
aquamakc
28.04.2017 13:30Очень хорошо, если кнопка начинает показываться не во время прокрутки вниз, а при начале обратной прокрутки вверх
Не согласен.
Крутим вниз (пока крутим фиксируем положение кнопки вверх) -> хотим вернуться наверх — нажимаем кнопку «Верх» = 2 действия.
Крутим вниз -> хотим вернуться наверх — крутим вверх (обнаруживаем кнопку «вверх») — нажимаем кнопку «Верх» = 3 действия.
При этом во втором случае ещё и не очевидное поведение UI, пользователь может просто не знать, что кнопка вверх появится после начала прокрутки, огорчится и уйдёт с сайта.
izhanov
29.04.2017 11:20Да, она появляется именно тогда, когда ему нужна. Начал крутить вверх — вот тебе помощь. А до этого не болтается перед глазами и не мешает (как бы случайно не нажать). Количество действий не увеличивается, не придумывайте.
dmitryrf
28.04.2017 16:04+1А мне очень не хватает кнопки «конец статьи/начало комментариев», т.к. на многих сайтах в подвале статьи есть кнопки для лайков и закладок, а я часто вспоминаю о закладке/лайке только после просмотра комментариев.
vintage
Эта кнопка решает проблему, которой не существует.
Зачем пользователю наверх? Скорее всего ему нужно не наверх, а к меню. Вот и показывайте меню при скроллинге вверх.
Это не такая уж частая операция, чтобы её оптимизировать. Если контента там не на 100 экранов, то пользователю не составит труда быстро дёрнуть прокрутку, чтобы оказаться вначале, что на мобилке, что на десктопе.
PavelPV
К тому же, на мобильных устройствах ios на уровне системы есть быстрый способ перейти вверх списка.
DavidKakaladze
Полагаю тут лучше пояснить что это происходить при нажатии в верней части экрана, там где отображается время.
От себя, также это решено в яндекс.браузере, при нажатии на вкладку. Не стоит решать проблемы которых нет.
lasthand
1. Иногда не к меню, а к новым сообщениям или комментариям. Но да — и тут лучше сделать кнопку для перехода именно к ним. Как тут, на хабре, справа.
2. Мой личный опыт говорит, что частая. И часто не хватает, потому что целиться в ползунок напряжно, горячие клавиши не везде работают. Но личный опыт — дело личное. Вы опираетесь на собранную статистику?
vintage
А вот это бесит во всех этих "бесконечных лентах", где непрочитанные сообщения располагаются внизу, а новые появляются сверху. В результате до интересных новостей ты можешь никогда не дойти из-за кучи более свежих.
lasthand
1. Не все ленты предназначены для полного прочтения.
2. Сейчас при написании комментария фокус находится в поле ввода, для «сбегать хомом к тексту статьи» нужно сначала кликнуть по фону. И да — на некоторых сайтах хом или ктрл-хом не работает, даже если не начинал ничего писать, не удосужился разбираться с причинами. Плюс мобилки.
vintage
hdfan2
Чак Норрис как-то раз прочитал её целиком. Дважды.
wlbm_onizuka
Яростно плюсую.
Самое интересное, на декстопе такой проблемы вообще не существует — никому не приходит в голову скрывать меню при скроллинге. Можете себе такое представить например в Microsoft Word?
А если нужно дополнительное место, всегда можно сделать кнопку для полноэкранного режима.
wlbm_onizuka
del
izhanov
Вот поэтому она и должна появляться только когда есть проблема — крутить очень много экранов обратно. На счет меню мысль хорошая, но этот элемент еще сложнее в реализации и взаимодействии.