Как кнопка «Назад» способна уничтожить юзабилити сайта?

Многие исследования юзабилити показывают, что пользователи (как новички, так и опытные), часто используют кнопку «вернуться назад» в браузере. К сожалению, разработчики интерфейсов и маркетологи редко задумываются, какие последствия это может иметь для юзабилити — учитывая современные модели веб-дизайна, которые используют приложения, анимацию, видео и прочее. Часто техническая структура таких макетов некорректно реагирует на функцию «вернуться назад», чем разрывает ментальный шаблон пользователей и ухудшает их опыт.

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

Из этой статьи вы узнаете:

  • что ожидают пользователи от кнопки «вернуться назад»;
  • каковы 5 самых распространенных ошибок;
  • простое решение этих проблем.

Решение действительно очень простое, однако им часто пренебрегают даже самые крупные бренды. Исправим эту ошибку?

Ожидания пользователей

Коротко: пользователи ждут, что кнопка «вернуться назад» покажет им то, что они воспринимают как предыдущую страницу. Слово «воспринимают» очень важно, ведь между тем, что кажется предыдущей страницей, и тем, что является ей технически — колоссальная разница.

Возникает вопрос: что именно пользователи интерпретируют как новую страницу? В большинстве случаев, если страница существенно отличается визуально, но при этом концептуально связана с сайтом, то она воспринимается как новая. Поэтому очень важно отслеживать, как сайт обрабатывает различные интерактивные элементы: лайтбоксы, формы, фильтры и прочее.

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

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

1. Наложения и лайтбоксы

Цель внедрения наложений и лайтбоксов — показать пользователю элемент, который возникает поверх страницы. Поэтому пользователи воспринимают подобные элементы как новые страницы, и нажимают кнопку «назад», чтобы вернуться в исходное положение — но попадают совсем не туда, куда ожидали. Это особенно прискорбно, ведь использование лайтбоксов только умножает отрицательное восприятие web-страницы — большинство пользователей не любят эти элементы на сайтах интернет-магазинов.

2. Фильтры и сортировка

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

Данный пример подчеркивает, что люди не вникают в технические аспекты при определении новой страницы, но используют только интуицию и сформировавшееся восприятие.

3. Форма регистрации/оплаты

Страница оплаты воспринимаются как новые страницы, и даже хуже — как многоступенчатый процесс, каждый этап которого можно отменить кнопкой «вернуться назад».

Подобный подход может принести проблемы, простой пример — человек хочет вернуться на шаг назад в заполнении формы, чтобы отредактировать введенную информацию. Нажатие кнопки «назад» возвращает его в корзину, и удаляет все (!) введенные данные. Раздражение и уход с сайта — закономерный эффект.

4. Использование AJAX

Технология AJAX может не оправдать ожидания пользователей: технически каждая страница AJAX находится под тем же URL, однако создается впечатление, что открываются новые страницы.

В контексте электронной коммерции у пользователей есть четкое восприятие того, что страница 3 и страница 4 — отдельные, и с четвертой к третьей можно перейти с помощью кнопки «назад».

Пользователи не готовы отказаться от кнопки «назад»

Учитывая, как широко применяется эта функция интернет-браузера, вопрос несоответствия ожиданий пользователя с видением разработчиков становится критическим — не стоит воспринимать его легкомысленно.

Особенно полюбилась кнопка «вернуться назад» пользователям мобильных приложений и сайтов. Как показало исследование мобильных версий сайтов, большинство пользователей использовало эту функцию на всех предложенных ресурсах. Причем использование кнопки не ограничивается откатом одной страницы — некоторые испытуемые нажимали ее до 15 (!) раз подряд.

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

Решение

Хорошая новость: HTML5 может предложить относительно простое решение проблемы, и называется оно HTML5 History API. Конкретнее — функция history.pushState() позволяет изменять URL без перезагрузки страницы. Соответственно сайт будет вести себя адекватно ожиданиям пользователя, нажавшего кнопку «вернуться назад».

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

Будьте разумны

Постарайтесь не переусердствовать с использованием history.pushState(). Эта сила должна быть применена разумно. Не стоит задавать отдельный URL для каждого слайда из фотогалереи и прочих мелких деталей. Иначе пользователь не почувствует разницу: по-прежнему, при нажатии «назад» ему потребуется пройти сквозь десятки незначительных изменений.

Любое значительное визуальное и контекстуальное изменение, воспринимающееся как отдельная страница, должно быть под своим URL.

Высоких вам конверсий!

По материалам baymard.com, image source M D 

22-05-2014

lpgenerator.ru

что делать с кнопкой «назад» в браузерах / Habr

Примечание: статья посвящена обзору проблемы неработающей кнопки «назад» в браузере при использовании AJAX-методов для передачи содержания страниц от сервера к клиенту. В статье рассматриваются основные принципы работы AJAX и возможные пути решения заявленной проблемы. Курсивом даны мои комментарии.

Эта статья является первой из ряда материалов (вторая статья посвящена работе с закладками), направленных на устранение части критики, которую адресуют сейчас AJAX, и предоставляющих обзор полезных методов, которые помогут сделать ваши приложения и веб-страницы, использующие технику AJAX, немного лучше.

Суть проблемы

С самого начала в основе Веба лежала возможность поставить гиперссылку с одной страницы на другую. Ссылки между страницами была первично двунаправленными: это означало, что переход по ссылке со страницы А на страницу Б никаким образом не мог предотвратить ни переход по ссылке обратно на страницу А, ни использование кнопки «назад» в браузере. Цепочка таких страниц представляет собой историю посещения в браузере, с каждой из них связан уникальный URL. Если представить это с технической стороны, то такая цепочка реализуется в виде стека. В дальнейшем я буду использовать термин «горизонтальная» ссылка для обозначения связи между элементами такого стека.

Рисунок 1. Горизонтальные ссылки

Чтобы вести разговор о страницах, построенных на горизонтальных ссылках и использующих AJAX, я введу термин «вертикальные» ссылки. Вертикальные ссылки являются ссылками на дополнительную информацию, отображаемую на текущей странице, но при этом доступ к ним осуществляется только с использованием AJAX-методов (прим.: в оригинале XMLHttpRequest, но информация может быть получена, в частности, и с помощи iframe, поэтому ввожу более общий термин). Другими словами, вы получаете новое содержание страницы на экране, но при этом сам URL этой страницы в браузере не меняется. Поскольку вертикальные ссылки не меняют URL’а страницы, то и в стек истории браузера новый элемент не добавляется. В результате, когда пользователь нажимает кнопку «назад» в браузере, он попадает на предыдущую горизонтальную страницу, которая может и не содержать всех изменений, появившихся на странице, которая только что была на экране.

Рисунок 2. Вертикальная ссылка между вторым URL’ом и сервером

Веб-сайт и веб-приложение

Подход, который стоит использовать для решения этой проблемы, напрямую зависит от того, что вы разрабатываете: веб-сайт или веб-приложение. Иногда тяжело разделить эти два понятия, но обычно веб-приложение можно отличить по следующим свойствам:

  • Перед использованием требуется авторизация
  • Серьезная работа с пользовательскими сессиями
  • Процесс взаимодействия пользователя с приложением имеет вполне определенное начало и конец

В качестве примера веб-сайта можно рассмотреть Yahoo! Finance и E*TRADE — в качестве веб-приложения. С точки зрения пользователя я могу сказать, что не всегда возможно провести четкую границу между этими двумя типами. Однако, веб-разработчикам стоит с самого начала определиться, что же они собираются разрабатывать: сайт или приложения? Если вам это понять, то можно задать простой вопрос: в отсутствии интернета чем лучше всего описывается ваша разработка: это набор Word’овых документов или же настольное приложение? Рассматривайте веб-приложения наравне с настольными с той лишь разницей, что первым еще требуется браузер для нормальной работы. Другой вопрос, который можно себе задать, звучит так: «Вашей главной целью будет предоставление информации или обеспечение функциональности?».

Первое решение: не злоупотребляйте вертикальными ссылками

Если вы собираетесь создать веб-сайт для публичного доступа, я бы советовал вам использовать AJAX только в случаях крайней необходимости (не злоупотреблять им). Возможно, будет требоваться изменение URL’а страницы, чтобы обновить ее всю, но при этом, я полагаю, иделогия правильной работы кнопки «назад» в браузере будет соблюдена. Помните, что не все вызовы AJAX сильно связаны с вертикальными ссылками (прим.: как я понимаю, автор имеет в виду прежде всего изменение каких-либо малых частей страницы при неизменном основном содержимом).

Легче всего просто не принимать во внимание неработоспособность кнопки «назад» в браузере, но полностью этим пренебрегать нельзя. Вместо того, чтобы создавать целостное приложение, использующее большое количество вертикальных ссылок и привязанное к единственному URL’у, создайте некоторое количество горизонтальных ссылок в тех местах, где это действительно требуется. Другими словами, используйте горизонтальные ссылки для разделения частей вашего приложения, например, таким образом, как это делается в бумажной литературе (книга делится на части и главы). Используя разумную комбинацию традиционных горизонтальных ссылок с вертикальными, можно добиться баланса мощи AJAX и возможности использовать функционал перемещения по истории браузера.

Прим.: в качестве примера, пожалуй, можно привести некоторое количество современных сайтов, на которых AJAX используется только для предоставления некоторых дополнительных возможностей, в частности, это Хабрахабр и механизм голосования/добавления комментариев.

Второе решение: используйте специальную AJAX-библиотеку

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

anchor) (которые задаются после ‘#’ (hash) в ссылке). В результате получается вертикальная ссылка, которая изменяет URL страницы таким образом, что эмулирует новую горизонтальную ссылку (прим.: когда мы переходим по вертикальным ссылкам, мы одновременно переходим и по псевдо-горизонтальным), при этом не перегружая текущую страницу. Хотя каждая из таких библиотек добавляет на веб-страницу еще один уровень обработки (сложности, complexity), все же они довольно легко могут быть интегрированы в вашу разработку.

Прим.: ниже сгруппированы основные методы создание псевдо-горизонтальных ссылок, я постарался дополнить их известными мне примерами, расширив список статьи-первоистоника.

  1. Прим.: суть решения: при каждом вызове AJAX к URL’у страницы в качестве якоря добавляется текущий номер элемента в стеке «истории», фактически, просто увеличивающиеся числа. При нажатии кнопки «назад» в браузере, URL страницы меняется на предыдущий. Каждые 100 (200, 400, 1000) миллисекунд страница проверяет, не изменился ли у нее якорь в URL’е, если якорь изменился, то осуществляется подгрузка данных, соответствующих текущему якорю (=элементу в стеке «истории»).

    Подход Mike Stenhouse’а. Демо-версия предельна проста и работает почти во всех браузерах. Демо-версия этого решения можно посмотреть по этой ссылке и проследить, что происходит с URL’ом страницы, когда вы кликаете по ссылкам.

    У меня постоянно вываливается сообщение об ошибке, но суть решения понять можно

    Подход Brad Neuberg’а, эта библиотека пытается быть максимально кроссбраузерной без лишнего усложнения кода. Хорошо, что она доступна под BSD opensource лицензией. Brad опубликовал пошаговую инструкцию создания этой библиотеки, равно как и онлайн-демо.

    Подход mikage’а с использованием библиотеки jQuery можно посмотреть здесь.

  2. Прим.: суть решения: вместо изменения URL’а самой страницы создается невидимый iframe элемент, в который загружается URL, у которого меняется якорь (в данном случае подход более гибкий, потому что позволяет задать часть параметров прямо после ‘#’, например, URL для AJAX-запроса или дополнительные параметры, но при этом не происходит изменение адреса головной страницы, т.е. для пользователя, фактически, ничего не меняется, но история посещений в броузере обновляется). На основе этой идеи создано несколько framework’ов.

    Plex — AJAX framework с открытым кодом, который поддерживает очень много возможностей, в том числе, и эмуляцию кнопки «назад» в браузере.

    Dojo — еще один AJAX framework с открытым кодом, обеспечивающий некоторую AJAX функциональность и эмуляцию кнопки «назад» в браузере.

    Обнаружил еще одну разновидность этого подхода в блоге Streampad, автор гарантирует работоспособность под Safari.

  3. Прим.: следующий метод очень мало отличается от предыдущего, однако, хочу выделить его в отдельный случай, потому что в нем вместо «native» AJAX методов используется просто отправка данных в скрытый iframe, в таком случае никаких дополнительных действий применять не требуется, потому что история посещений в браузере будет загружать тот или иной URL в этот iframe, а он уже будет соответствующим образом обновлять головную страницу.

    Описание подхода и демо-версия.

  4. Существует также ряд других подходов, в частности, с использованием document.save() или document.body.onbeforeunload(), которые не являются кроссбраузерными.

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

Решение третье: обеспечьте пользователям удобную альтернативу кнопки «назад»

Традиционно, кнопка «назад» служила для реализации концепции: «Верните меня туда, откуда я пришел» Однако, при нажатии на нее многие пользователи, на самом деле, подразумевают «отмените то, что я только что сделал». Чтобы избавить их от сооблазна воспользоваться кнопкой «обратно» не по назначению, можно создать кнопки с функциями «Отменить» или «Шаг назад» в вашем веб-приложении, использующем AJAX. Например, если вы разрабатываете в Вебе расширенный текстовый редактор, создайте кнопку «Отменить», которая предотвратит потерю пользователями целого документа при неверном нажатии кнопки «назад» в браузере.

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

В заключении, если вы все же ограничиваете функционал стандартной истории в браузере при создании веб-приложения, пожалуйста, поставьте пользователей об этом в известность тем или иным способом. AJAX не является первым методом, который ограничивает этот функционал, и, скорее всего, пользователи впервые узнают об этом тоже не от вас. (Есть еще апплеты, Flash и eCommerce приложения, которые могут снять с кредитной карточки сумму еще раз, если нажать кнопку «назад» в браузере.) Вес ответственности, который вы, в конечном счете, возложите на пользователя за его действия на сайте, будет зависеть от вашей корпоративной культуры, но почему бы не сделать его чуточку легче?

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

Web Optimizator: проверка скорости загрузки сайтов

habr.com

Кнопки «Наверх», «Назад», «Вниз» на jQuery, как вконтакте

Это статья — продолжение к моему старому посту про кнопку наверх, который с момента публикации набрал максимальное количество просмотров среди остальных постов на блоге и 95 комментариев!

Вот скрин из Google Analytics, топ 3 поста на блоге с момента публикации «кнопки наверх»:

Отрыв практически в два раза, впечатляет 🙂

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

1. Кнопка «Наверх-Назад» (на предыдущую страницу)

Теория этой кнопки в том, что когда человек нажал на кнопку «наверх», ему захочется вернуться на предыдущую просмотренную страницу (разве что предыдущая страница — результаты поиска в Google) и поэтому ему необходимо предложить такую возможность.

HTML

Сначала HTML-код, вставьте его куда-нибудь на своё усмотрение, я бы засунул перед закрывающим тегом </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button_back.js"></script>
<div>
	<a href="#top">наверх</a>
</div>

Повторю ещё раз, если кнопка не работает, попробуйте при подключении файла button_back.js прописать абсолютный URL.

CSS

#top-link{
	cursor:pointer;
	display:none;
	position:fixed;
	top:0px;
	bottom:0px;
	padding-left:5px;
	padding-top:5px;
	z-index:1;
}
#top-link a{
	display:block;
}

jQuery

Это содержимое файла button_back.js. Обратите внимание на ID основного блока с контентом на 3-й строчке кода, у меня это #content, а у вас может быть что-нибудь другое, например #wrapper или #container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('наверх').parent().removeAttr("onClick");
		} else {
			topLink.children('a').html('назад').parent().attr("onClick", "history.back()");
		}
	});
	topLink.click(function(e) {
		$("body,html").animate({scrollTop: 0}, 500);
		return false;
	});
});

P.S. в примере я особо не заморачивался с оформлением кнопки — всё только самое необходимое, если вам нужно оформление — смотрите или скачивайте демо.

2. Кнопка «Наверх-Вниз» (обратно в ту часть страницы, где был переход наверх)

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

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

Подробнее о том, как определить текущее местонахождение на странице.

Итак, погнали.

HTML и CSS

Тут практически всё точно также, как и в предыдущем примере (но в демо есть некоторые отличия в CSS), единственное только я назвал по-другому файл со скриптами, button_down.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="button_down.js"></script>
<div>
	<a href="#top">наверх</a>
</div>
#top-link{
	cursor:pointer;
	display:none;
	position:fixed;
	top:0px;
	bottom:0px;
	padding-left:5px;
	padding-top:5px;
	z-index:1;
}
#top-link a{
	display:block;
}

jQuery + плагин scrollTo

Содержимое файла button_down.js, опять-таки не забывает изменить ID элемента #content.

;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
 
jQuery.extend(jQuery.fn, {
	toplinkwidth: function(){
		totalContentWidth = jQuery('#content').outerWidth(); // ширина блока с контентом, включая padding
		totalTopLinkWidth = jQuery('#top-link').children('a').outerWidth(true); // ширина самой кнопки наверх, включая padding и margin
		h = jQuery(window).width()/2-totalContentWidth/2-totalTopLinkWidth;
		if(h<0){
			// если кнопка не умещается, скрываем её
			jQuery(this).hide();
		} else {
			if(jQuery(window).scrollTop() >= 1){
				jQuery(this).show();
			}
			jQuery(this).css({'padding-right': h+'px'});
		}
	}
});
 
jQuery(function($){
	var topLink = $('#top-link');
	topLink.css({'padding-bottom': $(window).height()});
	// если вам не нужно, чтобы кнопка подстраивалась под ширину экрана - удалите следующие четыре строчки в коде
	topLink.toplinkwidth();
	$(window).resize(function(){
		topLink.toplinkwidth();
	});
	$(window).scroll(function() {
		if($(window).scrollTop() >= 1) {
			topLink.fadeIn(300).children('a').html('наверх').parent().removeClass('bottom_button').addClass('top_button');
		} else {
			topLink.children('a').html('вниз').parent().removeClass('top_button').addClass('bottom_button');
		}
	});
	topLink.click(function(e) {
		if($(this).hasClass('bottom_button')){
			// при нажатии на кнопку «Вниз» переходим туда, где прекратили чтение
			$("body").scrollTo( pos + 'px', 500 );
		} else{
			// определяем и запоминаем координаты того места страницы, откуда был совершен переход наверх
			pos = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
			$("body,html").animate({scrollTop: 0},500);
		}
		return false;
	});
});

Работоспособность кода протестирована в браузерах Google Chrome, Mozilla Firefox и Opera (в актуальных на момент обновления данной статьи версиях).

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp — официальной конфе по WordPress, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

misha.blog

browser — Как работает кнопка «Назад» в веб-браузере?

Ваш веб-браузер хранит стек (или список, если хотите) веб-страниц, которые вы посетили в этом окне. Скажем, ваша домашняя страница — google.com, и оттуда вы посетите несколько других сайтов: youtube.com, yahoo.com и cnn.com. При посещении последнего список выглядит следующим образом:

google.com -> youtube.com -> yahoo.com -> cnn.com
                                            ^
                                            |
                                       current page

Когда вы нажмете кнопку «Назад» , браузер вернет вас на предыдущую страницу в списке, например:

google.com -> youtube.com -> yahoo.com -> cnn.com
                                ^
                                |
                           current page

На этом этапе вы можете снова нажать «Назад» , чтобы перейти на сайт youtube.com, или вы можете нажать «Вперед», чтобы снова отправить вас на cnn.com. Скажем, вы нажмете Назад второй раз:

google.com -> youtube.com -> yahoo.com -> cnn.com
                   ^
                   |
              current page

Если вы сейчас перейдете, скажем, на abc.com, список изменится так:

google.com -> youtube.com -> abc.com
                               ^
                               |
                          current page

Обратите внимание, что как yahoo.com, так и cnn.com исчезли из списка. Это потому, что вы выбрали новый маршрут. Браузер поддерживает только список страниц, которые вы посетили, чтобы добраться до того места, где вы сейчас находитесь, а не истории каждой страницы, на которой вы когда-либо были. Браузер также ничего не знает о структуре сайта, который вы посещаете, что может привести к неожиданному поведению.

Вы находитесь на торговом сайте (ne.com, в качестве краткого примера), в котором есть категории и подкатегории продуктов для просмотра. Дизайнер сайта задумчиво предоставил панировочные сухари в верхней части окна, чтобы вы могли перемещаться по категориям. Вы начинаете на верхней странице сайта, нажимаете «Оборудование» , затем «Память». Список теперь выглядит следующим образом:

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem
                                           ^
                                           |
                                      current page

Вы хотите вернуться в категорию «Оборудование» , чтобы вы использовали панировочные сухари, чтобы перейти к родительской категории, вместо использования кнопки «Назад» . Теперь список браузеров выглядит следующим образом:

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                                          ^
                                                          |
                                                     current page

В соответствии с структурой сайта вы вернулись (до уровня), но в браузер вы пошли вперед, потому что вы нажали на ссылку. Каждый раз, когда вы нажимаете на ссылку или вводите URL-адрес в адресной строке, вы продвигаетесь вперед, насколько это касается браузера, независимо от того, приведет ли эта ссылка к странице, на которой вы уже были.

Наконец, вы хотите вернуться на главную страницу сайта (ne.com). Вы можете использовать панировочные сухари, но на этот раз вы нажмете кнопку «Назад» — кажется очевидным, что он должен подняться на один уровень, не так ли? Но где он вас принимает?

Первоначально он запутывает многих пользователей (включая меня, когда я это делаю), что он «понижает» уровень, возвращается в категорию «Память». Если посмотреть на список страниц, легко понять, почему:

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                            ^
                                            |
                                       current page

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

Было бы здорово, если бы браузеры позволяли дизайнерам сайтов обращать внимание на кнопку «Назад» , чтобы сделать очевидную вещь (подняв уровень), а не то, что она делает сейчас?

Изменить: комментатор спросил, перезагружает ли браузер страницу или просто отображает ее из своего локального кеша.

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

qaru.site

No related posts.