Кнопка вверх для прокрутки страницы сайта в начало
Процесс создания кнопки вверх начнём с HTML-разметки:
В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image :
В этом коде мы элементу устанавливаем фиксированное позиционирование, то есть 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:
Здесь мы оформили весь код в формате объекта. Для выбора необходимых элементов на странице мы использовали здесь метод querySelector , а для добавления обработчиков событий – свойство DOM-объекта onclick и метод addEventListener . В результате мы получили следующее:
Использование другого SVG-изображения
В примере, приведённом выше, мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:
Кроме изменения SVG-изображения, мы также поменяли здесь некоторые другие стили:
Изменение цвета фона и других свойств кнопки
Для изменения цвета, размера, расположения и других свойств кнопки, необходимо просто отредактировать CSS правила, представленные выше.
Пример квадратной кнопки, в которой в качестве цвета фона ( background-color ) используется #3aa111 :
Кнопка с плавным появлением и скрытием
Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.
Для этого в CSS необходимо внести следующие изменения:
Также необходимо отредактировать JavaScript код, например, так:
Для добавления и удаления классов у элементов мы в этом коде использовали методы add и remove объекта classList . При этом часть этих действий выполняли не сразу, а спустя некоторое время, используя для этого метод setTimeout .
Выезжающая снизу кнопка вверх
В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition . Кроме этого, SVG-изображение вставим с использованием тега <svg> :
MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Три лучших способа сделать прокрутку вверх страницы
Чтобы посетитель вашего веб-ресурса каждый раз, дочитав вашу интереснейшую статью до конца, не терзал колесико своей компьютерной мышки, прокручивая страницу вверх к меню, нужно для него сделать на сайте или в блоге кнопку «Вверх», которая будет прокручивать веб-страницу по нажатию. В этой статье я представляю три лучших способа реализации этой задумки.
А именно: описание того как можно сделать кнопку «Вверх» и реализовать простую прокрутку веб-страницы только через HTML и CSS, а также лучшие решения как сделать плавный скроллинг страницы используя jQuery. И конечно, инструкция как это применить.
Итак, начнем с простого.
Кнопка и прокрутка страницы вверх через HTML и CSS.
Скрипт jQuery для плавной прокрутки страницы вверх
Плюсы — легкость скрипта, красота работы, минусы — маленький функционал, а практически его и нет-то. Ведь не всегда требуется прокрутить страницу сайта только вверх, иногда хочется предоставить пользователю возможность вернуться к месту клика по кнопке или к самому низу страницы.
Но самым жизнеспособным и несомненно лучшим выполнением данной задачи, стал jQuery плагин (очень небольшой скрипт), предложенный by Craig Wilson, Ph.Creative еще в далеком 2009 году, который во всю используется и рекламируется по сей день. Представляю его вашему вниманию.
jQuery плагин прокрутки веб-страницы вверх
Вообще, по большому счету, прям-таки плагином этот скрип назвать как-то не особо и получается из-за его совершенно небольшого размера. Но при этом, он обладает всеми необходимым функционалом. Этот скрипт:
— плавно прокручивает страницу вверх;
— кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху;
— имеет маленький размер и работает во всех браузерах.
Итак, HTML код для кнопки:
Вот такие три простых решения для того чтобы сделать красивую и удобную кнопку прокрутки страницы.
Scroll-to-Top Button using Vanilla JS
In this tutorial, you’ll learn how to create a scroll-to-top button.
Introduction
Creating a scroll-to-top button with smooth scrolling.
- Detect user scroll
- Display scroll-to-top button after a certain amount of time
- Go to the top when the user clicks on it
Detect user scroll
How to detect user scroll?
First, we create a function called handleScroll() in this function we detect the user scroll.
we need to access the document elements for this case we use document.documentElement(). this returns all the elements used in the page.
using rootElement variable we can detect scroll status.
we need to detect Scroll Top status how much space our scroll runs.
Now we need to find the total amount of scroll for this case we have ScrollHeight and ClientHeight.
ScrollHeight includes the invisible part of the scroll but the clientHeight includes the visible part of Scroll.
We need to subtract clientHeight from ScrollHeight to find the totalScroll.
After this, we need to divide scrollTop by totalScroll which remains an amount.
Now we add our logic to the document.
And now we want to go to top of the page.
We create a function scrollTop in this function we use ScrollTo this requires at least one parameter if you want to add smooth scroll then you can.