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

Опубликовано: 2023-02-12

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

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

ВСЕ.

.

СПОСОБ.

К.

.

ВЕРШИНА.

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

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

Что такое залипающая кнопка Back-to-Top?

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

Что нужно учитывать перед добавлением кнопки «Вернуться к началу»

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

Вот несколько вопросов, на которые нужно ответить, прежде чем создавать кнопку прокрутки вверх:

  • Где он будет размещен?
  • Насколько большим (или маленьким) он должен быть?
  • Каким шаблонам дизайна вы должны следовать, чтобы он оставался на бренде? (Подумайте о цветах, шрифтах, значках и т. д.)
  • Есть ли риск, что он закроет важный контент сайта, например информацию на боковой панели?
  • Что происходит на мобильных устройствах? Будет ли он отзывчивым?
  • Вам это действительно нужно?*

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

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

Как добавить липкую кнопку Back-to-Top на ваш сайт WordPress

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

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

Или посмотрите этот видеоурок по добавлению липкой кнопки «Вверх»!

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

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

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

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

 <a class="скрыть верхнюю ссылку" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Наверх</span>
</a>

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

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

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

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

 <span class="screen-reader-text">Наверх</span>

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

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

 .top-ссылка {
  переход: все .25 с облегченным входом-выходом;
  положение: фиксированное;
  внизу: 0;
  справа: 0;
  дисплей: встроенный гибкий;
  
 курсор: указатель;
 выравнивание элементов: по центру;
 выравнивание содержимого: по центру;
 поле: 0 3em 3em 0;
 радиус границы: 50%;
 набивка: .25em;
 ширина: 80 пикселей;
 высота: 80 пикселей;
 цвет фона: #F8F8F8;

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

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

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

 .показывать {
    видимость: видимая;
    непрозрачность: 1;
  }
  
  .скрывать {
    видимость: скрытая;
    непрозрачность: 0;
  }

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

 свг {
 заполнить: #000;
 ширина: 24 пикселя;
 высота: 12 пикселей;
}
&: наведите {
 цвет фона: #E8E8E8;
 	свг {
	 заполнить: #000000;
	}
}

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

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

 // Текст предназначен только для чтения с экрана.
.экран-читатель-текст {
	положение: абсолютное;
	клип-путь: вставка (50%);
	поле: -1px;
	граница: 0;
	заполнение: 0;
	ширина: 1 пиксель;
	высота: 1 пиксель;
	переполнение: скрыто;
	перенос слов: обычный !важный;
	клип: прямоугольник (1px, 1px, 1px, 1px);
	&: фокус {
		дисплей: блок;
		верх: 5 пикселей;
		слева: 5 пикселей;
		z-индекс: 100000; // Над панелью инструментов WP
		клип-путь: нет;
		цвет фона: #eee;
		отступ: 15px 23px 14px;
		ширина: авто;
		высота: авто;
		текстовое оформление: нет;
		высота строки: нормальная;
		цвет: #444;
		размер шрифта: 1em;
		клип: авто !важно;
	}
}

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

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

 // Установить переменную для нашего элемента кнопки.
const scrollToTopButton = document.getElementById('js-top');

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

 const scrollFunc = () => {
  // Получить текущее значение прокрутки
  пусть у = окно.прокруткаY;
  
  // Если значение прокрутки больше высоты окна, давайте добавим класс к кнопке прокрутки вверх, чтобы показать это!
  если (у > 0) {
    scrollToTopButton.className = "показать верхнюю ссылку";
  } еще {
    scrollToTopButton.className = "скрыть верхнюю ссылку";
  }
};

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

 window.addEventListener («прокрутка», scrollFunc);

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

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

 константа scrollToTop = () => {
  // Давайте установим переменную для количества пикселей, которое мы от верхней части документа.
  const c = document.documentElement.scrollTop || документ.тело.scrollTop;
  
  // Если это число больше 0, мы вернемся к 0 или к началу документа.
  // Мы также анимируем эту прокрутку с помощью requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  если (с > 0) {
    window.requestAnimationFrame (scrollToTop);
    // ScrollTo принимает координаты x и y.
    // Увеличьте значение «10», чтобы получить более плавную/медленную прокрутку!
    window.scrollTo (0, с - с / 10);
  }
};

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

 // Когда кнопка нажата, запускаем нашу функцию ScrolltoTop выше!
scrollToTopButton.onclick = функция (е) {
  e.preventDefault();
  пролистать наверх();
}

Вот и все! Теперь у вас есть полностью функционирующая и настраиваемая липкая кнопка возврата наверх на вашем сайте WordPress.