Как добавить липкую кнопку возврата наверх на свой сайт

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

Но тогда вам придется прокрутить.

ВСЕ.

.

ПУТЬ.

К.

.

ТОП.

А то думаешь…. — Хм, неважно. И закройте страницу.

Как веб-дизайнер, это чуть ли не последнее, что вы хотите, чтобы кто-то сделал, когда он попадает на сайт, который вы создаете. К счастью, на дворе 2019 год, и лучшие практики современного веб-дизайна дали нам решение этой распространенной проблемы UX: залипание кнопки «назад-вверх».

Что такое залипающая кнопка возврата наверх?

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

На что следует обратить внимание перед добавлением кнопки возврата наверх

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

*Примечание: вы можете возразить, что современные пользователи вынуждены прокручивать страницу вниз (и обратно!) — это устранило бы «необходимость» в кнопке возврата наверх. Мой совет: протестируйте! Добавьте событие Google Analytics по клику или используйте инструмент тепловой карты, такой как Hotjar, чтобы увидеть, как посетители вашего сайта взаимодействуют со страницей.

Лучшей «лучшей практикой» является практика, основанная на данных вашего собственного сайта и пользователей!

Как добавить липкую кнопку возврата наверх на ваш сайт WordPress

В этом уроке я покажу вам, как добавить именно ту кнопку возврата наверх, которую мы используем здесь, в Layout! Единственная разница в том, что мы поместили наш в липкий заголовок в верхней части экрана, а не в нижний правый угол. (Но не волнуйтесь, это та же концепция!)

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

Давайте начнем! Я пройдусь по каждому этапу процесса, и вы также можете следить за этим Codepen от собственного фронтенд-инженера Flywheel, Джоша Мейсена.

См. кнопку прокрутки вверх на Pen ES6 от Джоша Лоулера (@joshuamasen) на CodePen.

В этом руководстве по липкой кнопке «Вверх» мы будем использовать три языка:

• HTML для разметки для создания кнопки
• CSS для оформления кнопки в соответствии с вашим брендом
• JavaScript, чтобы заставить его «работать» и определить поведение кнопки

В HTML вы найдете следующие строки:

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

Это будет ваша липкая кнопка возврата наверх! Вы можете видеть, что мы добавили класс CSS с именем .top-link и используем простой JavaScript, чтобы «заставить его работать». Мы также используем встроенный SVG для кнопки.

Помимо SVG, вы также можете использовать файл изображения или значок шрифта для создания кнопки. Однако мы предпочитаем метод SVG, потому что:

1. Он не будет пикселироваться при разных размерах экрана, как растровое изображение.
2. SVG повсеместно поддерживаются во всех браузерах. (Ура, пользовательский опыт!)
3. Это легко стилизовать с помощью CSS, поэтому вы можете очень легко изменить все в нем.
4. Для этого требуется всего одна строка кода, что делает его легким и повышает производительность сайта.

Последняя действительно важная часть, которую вы найдете в HTML, это строка:

<span class="screen-reader-text">Back to top</span>

Это очень важно для пользователей, работающих с программами чтения с экрана, и улучшит доступность вашего сайта WordPress. (Думайте об этом как о теге alt для изображения, но для кнопки прокрутки вверх!)

Теперь поговорим подробнее об этом CSS-классе .top-link . Мы используем это, чтобы фактически оформить кнопку, и именно здесь вы будете определять такие качества, как размер кнопки, размер отступов вокруг нее, цвет и т. д.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Примечание. Мы используем Sass (язык таблиц стилей), чтобы писать наш CSS немного быстрее. Узнайте больше об этом препроцессоре здесь.

Пара важных фрагментов из этого фрагмента: transition: all .25s ease-in-out ; контролирует, как «быстро» ваша кнопка будет появляться или исчезать на экране, и position: fixed ; это то, что заставляет кнопку «прилипать» к нужному вам месту.

Далее вы увидите правила для .show и .hide . Мы будем использовать JavaScript для переключения между этими классами, чтобы сообщить браузеру, когда кнопка должна (или не должна) появляться на странице.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

Прежде чем мы перейдем к JavaScript, добавим еще несколько строк в CSS.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

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

Наконец, мы добавим немного CSS, чтобы скрыть текст с надписью «наверх» для программ чтения с экрана.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

Теперь о JavaScript! Мы собираемся сделать это без загрузки jQuery, что поможет сделать ваш код легким и быстрым для загрузки.

Первая переменная поможет браузеру найти кнопку.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

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

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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

window.addEventListener("scroll", scrollFunc);

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

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

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

И последнее, но не менее важное: нам просто нужно указать странице запускать эту функцию, когда кто-то нажимает нашу липкую кнопку «назад к началу».

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Далее: Откройте для себя 19 плагинов WordPress, которые любят разработчики

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

Вот и все! Теперь у вас есть полностью функционирующая и настраиваемая липкая кнопка возврата наверх на вашем сайте WordPress. Чтобы увидеть весь учебник в действии, не забудьте проверить этот Codepen от собственного фронтенд-инженера Flywheel, Джоша Мейсена!