Пролистывание страницы в html

Способы добавления плавной прокрутки страницы в CSS и JavaScript

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

Однако, это не только красиво, но и достаточно просто с точки зрения реализации.

Прокрутка страницы с помощью CSS

Для того чтобы плавная прокрутка происходила на всей странице, необходимо добавить свойство scroll-behavior: smooth для селектора html .

Если плавная прокрутка необходима в пределах какого-то контейнера, то это свойство назначают для него.

По умолчанию свойство scroll-behavior имеет значение auto , т.е. прокрутка будет обычной, без эффекта плавности.
Посмотрите пример, основанный на css-свойстве (открыть в новой вкладке):

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

Ложкой дегтя для этого свойства будет неполная поддержка его браузерами. Вы можете посмотреть, какова она на скриншоте и на caniuse.com.

Поддержка свойства scroll-behavor браузерами

Поэтому рассмотрим, как сделать плавную прокрутку с помощью jQuery и JavaScript.

Скроллинг с помощью jQuery

Понятно, что для использования jQuery вам нужно будет сначала подключить эту библиотеку. Дальше нужно будет отслеживать клики по ссылкам, у которых есть хэш ( # ) и анимировать свойство scrollTop для селектора $(‘html, body’) .

Это решение является кроссбраузерным, хотя у него есть один недостаток — если на вашем сайте jQuery не используется для работы с другими объектами/плагинами, то подключать лишние 88кб или порядка 40кб в gzip-сжатом виде не очень интересно ради 10-15 строк кода.
Пример (открыть в новой вкладке):

Плавная прокрутка на JavaScript

Здесь тоже есть 3 решения, каждое из которых использует свой подход к созданию плавности прокрутки с помощью разных JS-методов.

Решение 1. Метод scrollIntoView()

Из документации на MDN узнаем, что

Метод Element.scrollIntoView() прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Этот метод имеет параметры, подобные css-свойству scroll-behavior: smooth для прокрутки контента к элементу с нужным id, указанным в виде хэш в ссылке.

const links = document . querySelectorAll ( ‘a[href^=»#»]’ ) ; // все ссылки, с атрибутом href, начинающимся с «#»

К сожалению, и тут не обошлось без «ложки дегтя» в виде поддержки браузеров. Давайте обратимся к caniuse.com и увидим такую картину:

Поддержка свойства scrollIntoView браузерами

К сожалению, нужное нам значение свойства behavior: ‘smooth’ поддерживается не всеми браузерами.

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

Пример прокрутки контента с помощью метода scrollIntoView() (открыть в новой вкладке)).

Решение 2. Используем window.scrollBy() для плавной прокрутки.

Тут все методы и свойства и имеют хорошую поддержку браузерами.

let links = document . querySelectorAll ( ‘a[href^=»#»]’ ) , // все ссылки, с атрибутом href, начинающимся с «#»

header = document . querySelector ( ‘header’ ) , //элемент header, который может быть спозиционирован абслютно или фиксированно

Код JavaScript предполагает, что на вашей странице нет абсолютно позиционированной или фиксированной шапки сайта (элемент ), в котором чаще всего размещаются ссылки-якоря на разделы страницы, поэтому переменная offsetTop (смещение сверху) сначала задана как 0.

Если же шапка сайта, например фиксирована (для этого в примере есть переключатель), то отступ сверху нужен и для (задается в классе .for-fixed ), и для всех тех блоков, на которые указывают ссылки. Поэтому в переменную offsetTop мы записываем расчетную высоту .
Пример прокрутки контента с помощью window.scrollBy() (открыть в новой вкладке)).

Решение 3. Использование методов requestAnimationFrame() и window.scrollTo() для плавной прокрутки

Метод window.requestAnimationFrame() позволяет выполнить анимацию, используя в качестве параметра функцию, которая будет вызвана перед перерисовкой экрана в браузере. В примере функция имеет имя step и плавно прокручивает окно браузера к соответствующему блоку с помощью метода window.scrollTo() в зависимости от параметра velocity , который задан, как .8 .

Источник

Пролистывание страницы в html

За вывод полосы прокрутки отвечает свойство «overflow».

Свойство overflow может принимать несколько значений:

В браузере — как можно увидеть все значения прокрутки?

нажимаем исследовать элемент добавляем свойство overflow и далее можно перебирать.

Прокрутка «overflow: auto»

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

Создаем блок div с текстом и стилями(«3 способа css»):

В свойствах заранее подразумеваем, что высота будет меньше предполагаемого текста.

Для прокрутки ставим «overflow: auto»:

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: auto

как сделать прокрутку html — overflow: auto

как сделать прокрутку html — overflow: auto

Результат вывода прокрутки в html:

Как видим. при использовании «overflow: auto» произошел вывод только вертикальной прокрутки.

Из-за того, что по горизонтали, внутренний размер блока не превышен его внешнего размера!

Перейдем ко второму примеру прокрутки:

Прокрутка «overflow: scroll»

В принципе, по поведению scroll и auto похожи. вы можете потренироваться. заменить scroll на auto и обратно.

Зададим нашему блоку размер «width: 200px;»

Внутри него сделаем второй блок, который будет больше нашего выше приведенного размера «width: 500px;»

И для примера прокрутки используем «overflow: scroll;»

Разместим приведенный код прокрутки ниже:

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

Результат использования прокрутки «overflow: scroll;»

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

Использовать горизонтальную или вертикальную прокрутку

К примеру. вам требуется показать только один вид прокрутки. либо горизонтальный:

Либо только вертикальную прокрутку:

Разберем пример выводи одного типа прокрутки.

Соответственно в зависимости от ваших потребностей меняем горизонтальную прокрутку букв «x» либо вертикальную прокрутку букв «y»

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

Пример только одной прокрутки — горизонтальной:

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

Результат вывода — только горизонтальная прокрутка

В приведенном примере мы наблюдаем только одну прокрутку — горизонтальную!

Почему не работает прокрутка?

Интересный вопрос попался:

Почему не работает прокрутка? Одна из банальных причин, почему может «не работать прокрутка» — отсутствие прописанной «высоты!»(height)

Источник

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Три лучших способа сделать прокрутку вверх страницы

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

Кнопка и прокрутка страницы вверх через HTML и CSS.

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