Особенности ссылок «вверх страницы»
Когда размер страницы превосходит некоторый предел, разработчики часто ставят внизу текстовую или графическую ссылку «вверх страницы». Эта ссылка позволяет быстро перейти в начало страницы, что иногда бывает очень удобно.
Классически подобная ссылка верстается так:
Недостатком этого метода является то, что необходимо какой-то элемент вверху страницы поместить в якорь (), так как некоторые браузеры не понимают пустые якоря. Кроме того, при переходе к якорю в Internet Explorer исчезает название страницы в заголовке браузера, и не совсем логично работает кнопка Back.
Но от этих проблем можно избавиться, перехитрив браузер. Для этого достаточно просто указать пустую ссылку вверх страницы, не задавая никаких якорей. Браузер без лишних раздумий прокрутит страницу вверх. Я специально посмотрел в спецификации, что она имеет сказать на этот счёт, но не нашел никаких указаний, как UA должен действовать в ситуации, когда имя якоря не указано. Хорошо, что в этом недокументированном поведении абсолютно все браузеры проявляют единодушие.
Наконец, хотелось бы указать ещё один способ установки ссылки «вверх страницы». Он основан на JavaScript и не вызывает никаких побочных эффектов:
Здесь был использован метод window.scroll(x,y), который позволяет промотать страницу на указанное количество пискелов по горизонтали (x) и вертикали (y). Если мы обнулим эти два параметра, то будет восстановлен статус кво — страница проскролится в начало.
Напоследок скажу, что я обычно придерживаюсь последнего предложенного метода, который работает в подавляющем большинстве браузеров и при этом не основан на каких-либо нестандартных «фичах».
P. S. Как правильно подсказал Николай Меркин, наиболее совместимым решением будет такой вариант:
Урок 27. Ссылка «Наверх страницы»
Иногда страница сайта может быть очень длинной. Например, если вы захотите выложить очень много текста. Для возвращения вверх можно воспользоваться колесом прокрутки, или бегунком. Но на многих сайтах для возвращения назад существует соответствующая ссылка или кнопка, нажав на которую, вы даёте команду браузеру и он быстро возвращает страницу в исходное положение.
Подобную ссылку можно прописать минимум четырьмя способами. рассмотрим их преимущества и недостатки.
Пропишем ссылку подобно тому, как прописываются «якоря» для страницы, о которых шла речь в Уроке 16 Выглядеть это будет так:
Вверху страницы вы ставите «якорь». Например, я поставила в него часть заглавия страницы: «В этом разделе. «
Внизу страницы вы помещаете ссылку «НАВЕРХ»:
У этого способа есть один недостаток. Браузеры не всегда адекватно себя ведут с подобными ссылками. Например, если вы наведёте курсор мыши на надпись вверху страницы «В этом разделе» — то скорее всего вы увидите, что помещённая в «якорь» часть фразы начинает отображаться, как ссылка.
Для того, чтобы ничего такого не происходило и не нужно было искать, что бы поместить в «якорь», можно поступить по способу 2.
Можно попробовать просто разместить внизу станицы ссылку вида:
Теоретически, ни один браузер не должен возражать против такого способа и по клику возвращать страницу в исходное положение. Но более надёжно поступить следующим образом, который мы рассмотрим в способе 3.
Разместим внизу страницы ссылку вида:
При данном способе мы задействуем указание на прокрутку-возвращение по клику, где значения (0,0) — это перемотка страницы на указанное количество пикселей по горизонтали и вертикали. Если мы обнулим эти значения, то любой браузер воспримет нашу ссылку как указание вернуться в исходное положение, то есть, на начало страницы. И наконец, чуть отличающийся четвёртый способ.
Этот способ основан на JavaScript и так же, как предыдущий, однозначно работает в любом браузере. В низу страницы, под вашим текстом или картинками вы размещаете следующую конструкцию:
Здесь, как видите, тоже есть указание на то, чтобы прокрутить страницу на указанные пикселы (0,0), которые мы обнуляем и в результате, когда мы нажимаем на данную ссылку, браузер возвращает страницу в первоначальное положение.
Само собой, во всех указанных способах можно вместо слова «НАВЕРХ» расположить картинку, обозначающую возвращение к началу страницы.
Примечание: вместо надписи «НАВЕРХ» (Вернуться к началу, Вверх, К оглавлению и т.п.) вы можете поставить картинку, вписав её код вида
Кнопка вверх для прокрутки страницы сайта в начало
Процесс создания кнопки вверх начнём с HTML-разметки:
В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image :
.btn-up { /* фиксированное позиционирование */ position: fixed; /* цвет фона */ background-color: #673ab7; /* расстояние от правого края окна браузера */ right: 20px; /* расстояние от нижнего края окна браузера */ bottom: 0; /* скругление верхнего левого угла */ border-top-left-radius: 8px; /* скругление верхнего правого угла */ border-top-right-radius: 8px; /* вид курсора */ cursor: pointer; /* отображение элемента как flex */ display: flex; /* выравниваем элементы внутри элемента по центру вдоль поперечной оси */ align-items: center; /* выравниваем элементы внутри элемента по центру вдоль главной оси */ justify-content: center; /* ширина элемента */ width: 60px; /* высота элемента */ height: 50px; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }В этом коде мы элементу устанавливаем фиксированное позиционирование, то есть position: fixed . Для определение того, где должен располагаться элемент относительно краёв окна браузера, мы задаём следующие свойства: right: 20px и bottom: 0 .
Выравнивание псевдоэлемента ::before по центру внутри .btn-up выполним с помощью CSS Flexbox. Для этого .btn-up установим следующие свойства: display: flex , align-items: center и justify-content: center .
Шаг 2. Написание JavaScript кода
По умолчанию кнопка вверх не отображается. Показывать кнопку на странице будет только после того, как страница будет прокручена больше чем на 400px.
При нажатии на кнопку .btn-up будем прокручивать страницу к началу с анимацией.
Для выполнения этих действий нам необходимо написать JavaScript код. Выполним это на чистом JavaScript:
const btnUp = { el: document.querySelector('.btn-up'), show() { // удалим у кнопки класс btn-up_hide this.el.classList.remove('btn-up_hide'); }, hide() { // добавим к кнопке класс btn-up_hide this.el.classList.add('btn-up_hide'); }, addEventListener() ); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { // переместим в начало страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();Здесь мы оформили весь код в формате объекта. Для выбора необходимых элементов на странице мы использовали здесь метод querySelector , а для добавления обработчиков событий – свойство DOM-объекта onclick и метод addEventListener . В результате мы получили следующее:
Использование другого SVG-изображения
В примере, приведённом выше, мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:
.btn-up { position: fixed; background-color: #673ab7; right: 20px; bottom: 20px; border-radius: 22px; cursor: pointer; width: 44px; height: 44px; } .btn-up::before { content: ""; text-align: center; position: absolute; width: 20px; height: 20px; left: 12px; top: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E"); }Кроме изменения SVG-изображения, мы также поменяли здесь некоторые другие стили:
Изменение цвета фона и других свойств кнопки
Для изменения цвета, размера, расположения и других свойств кнопки, необходимо просто отредактировать CSS правила, представленные выше.
Пример квадратной кнопки, в которой в качестве цвета фона ( background-color ) используется #3aa111 :
Кнопка с плавным появлением и скрытием
Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.
Для этого в CSS необходимо внести следующие изменения:
.btn-up { position: fixed; /* фиксированная позиция */ background-color: #673ab7; /* цвет заднего фона */ right: 20px; /* расстояние от правого края */ bottom: 0px; /* расстояние от нижнего края */ border-top-left-radius: 8px; /* скругление верхнего левого угла */ border-top-right-radius: 8px; /* скругление верхнего правого угла */ cursor: pointer; /* форма курсора */ display: flex; /* не отображать элемент */ align-items: center; justify-content: center; transition: opacity 0.3s ease-in-out; width: 60px; height: 50px; opacity: 1; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }Также необходимо отредактировать JavaScript код, например, так:
const btnUp = { el: document.querySelector('.btn-up'), scrolling: false, show() { if (this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.remove('btn-up_hide'); this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.remove('btn-up_hiding'); }, 300); } }, hide() { if (!this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.add('btn-up_hide'); this.el.classList.remove('btn-up_hiding'); }, 300); } }, addEventListener() // при прокрутке окна (window) window.addEventListener('scroll', () => { const scrollY = window.scrollY this.scrolling = false; // если пользователь прокрутил страницу более чем на 200px if (scrollY > 400) { // сделаем кнопку .btn-up видимой this.show(); } else { // иначе скроем кнопку .btn-up this.hide(); } }); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { this.scrolling = true; this.hide(); // переместиться в верхнюю часть страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();Для добавления и удаления классов у элементов мы в этом коде использовали методы add и remove объекта classList . При этом часть этих действий выполняли не сразу, а спустя некоторое время, используя для этого метод setTimeout .
Выезжающая снизу кнопка вверх
В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition . Кроме этого, SVG-изображение вставим с использованием тега :
.btn-up { position: fixed; background-color: #f57c00; left: 20px; bottom: 30px; border-radius: 25px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease-in-out, transform 0.3s ease-in-out; color: #fff; width: 50px; height: 50px; opacity: 1; transform: translateY(0); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; transform: translateY(100px); } .btn-up-icon { width: 40px; height: 40px; fill: currentcolor; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #ef6c00; } }