Scroll behavior smooth что это

Плавная прокрутка по якорным ссылкам

По умолчанию, браузеры при клике по ссылке с якорем, делают моментальный переход «прыжок» к целевому элементу. Чтобы сделать прокрутку плавной, в ассортименте разработчика есть два подхода: CSS и JavaScript.

Scroll Behavior

CSS свойство scroll-behavior сообщает браузеру как обрабатывать прокрутку инициированную внутри элементов.

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

Поддержка браузерами

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

Почему вы все еще можете использовать JavaScript

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

Плагин Smooth Scroll

Вы по-прежнему можете использовать любые доступные JS-плагины для включения на сайте плавной прокрутки. Один из таких Smooth Scroll. Автор данного плагина прекратил работу над ним, так как не видит в нем необходимости в условиях развития CSS решения.

Плагин поддерживает все современные браузеры, включая IE9 и выше, а так же имеет множество настроек.

Плавная прокрутка с помощью jQuery

jQuery тоже умеет плавно крутить педали страницу. Следующий код инициализирует плавную прокрутку к якорю на той же странице. Он имеет некую логику для определения якорных ссылок и не затрагивает другие, а так же устанавливает фокус на якорный элемент после прокрутки.

Источник

Несколько неочевидных frontend-хитростей

Под катом вы узнаете о том, как быстро и легко оформить взаимодействие с SVG-иконками, добавить плавный скролл с помощью одного CSS-правила, анимировать появление новых элементов на странице, переносить текст на новую строку с помощью CSS и о новых способах оформления декоративной линии текста.

Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

В Firefox и Safari уже довольно давно появились дополнительные возможности для оформления декоративной линии, которая добавляется к тексту с помощью свойства text-decoration.

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

Можно задавать цвет для оформления текста:

А также стиль линии:

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь

Плавная прокрутка страницы на CSS (scroll-behaviour)

Малоподдерживаемое, но очень полезное свойство scroll-behaviour позволит нам одной строкой сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.

Анимация появления элемента (быстро и легко)

Представьте, что вам нужно создать страницу с динамически подгружаемым контентом. К примеру, ленту новостей, в которой при прокрутке появляются все новые и новые элементы. Чтобы элементы не мелькали перед глазами, неплохо было бы анимировать их появление.

Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation. По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элементу класса с анимацией или самого элемента). Поэтому, важно не хранить незаполненные блоки в DOM, а добавлять их динамически в контейнеры по мере загрузки.

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом
внутри:

К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!

SVG с интерактивными элементами

Если вам когда-нибудь приходилось оформлять взаимодействие с SVG-элементами, вы знаете, что сделать это не так-то просто. Чтобы обращаться в CSS к отдельным SVG-элементам, приходится добавлять на страницу не тег
Но! У нас есть неплохая альтернатива — прописывать все стили взаимодействия прямо в SVG:

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

UPD. Пользователь Large поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.

Кстати, при желании в SVG-файл можно добавить и CSS анимацию:

Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике. До новых встреч!

Источник

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

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

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

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

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

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

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

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

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

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

Сам код будет небольшим:

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Плавный скроллинг при помощи CSS

В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.

Эта статья была изначально опубликована в моем личном блоге

API scrollIntoView можно назначить анимацию прокручиваемой части, добавив свойство поведения в объект scrollIntoViewOption.

Я быстро запрыгнул на своего JavaScript-коня и написал крошечный скрипт для автоматического определения щелчков на якорях, чтобы браузер оживлял переход к элементу привязки. Этот переход действительно может дезориентировать пользователя, поэтому анимация этого процесса значительно улучшит UX.

Вот мое новое демо, где я использую только лишь CSS

Прежде чем мы начнем сходить с ума и пихать это на все сайты давайте подумаем о нескольких моментах.

Значение расстояния прокрутки

Если есть большое расстояние для перемещения, Firefox пропустит контент, чтобы ограничить время прокрутки, в то время как Chrome, прокручиваясь на максимальной скорости просто займет время, чтобы добраться до цели.

Мы могли бы использовать Smart CSS для обнаружения длинных страниц и условно применить стиль плавной прокрутки.

Легкость просмотра

Заключение

При выборе новой функциональности мы не должны сразу бежать за JavaScript. Сначала можно быстро выяснить, можно ли это сделать и с помощью CSS. Свойство scroll-behavior может быть хорошим улучшением UX, но обязательно отключите его на очень длинных страницах и дайте пользователю возможность отключить его, чтобы сохранить легкое чтение ваших страниц.

Источник

How to Implement Smooth Scrolling With CSS & JavaScript

In this new tutorial, we’ll learn how to implement smooth scrolling in our web pages. We’ll start with a pure CSS solution and then move on to a common jQuery approach for creating this functionality. Next, we’ll get rid of jQuery and discuss two pure JavaScript solutions.

Just to give you an idea of what we’ll discuss during this tutorial, check out one of the demos we’ll be building:

1. Begin With the HTML Markup

For demonstration purposes, we’ll define a header wrapped within a container and four sections. Inside it, we’ll specify a navigation menu and an introductory text.

Each section will have an id whose value will match the href value of a menu link. This association (what we refer to as a fragment identifier) will allow us to jump to specific parts of our page.

2. Define the Styles

The CSS part will be pretty straightforward, nothing extraordinary.

First, we’ll use CSS Grid to layout the page header. The menu will cover one-fourth of the available width, while the text the remaining three-fourths (the responsive stuff isn’t really important here):

Coming up next, we’ll apply some styles to the sections. Most importantly, we’ll ensure that they will be tall enough, so there’s adequate scrolling inside the page for the effect:

That’s all we need so far! If we now click on a specific link, we’ll immediately jump to the relevant page section.

Check out our initial demo:

Basic HTML stuff, right? Let’s now take it a step further and learn how to navigate to the sections smoothly.

3. Smooth Scrolling With CSS

The easiest and quickest approach for applying smooth scrolling inside a page is via the following rule:

Note: if you set scroll-behavior: smooth to the body element, smooth scrolling won’t work.

As an additional note, keep in mind that at the time of this writing, there isn’t any speed option defined in the specification for manipulating the animation speed.

Here’s the associated demo:

Solution Review

4. Smooth Scrolling With jQuery

We’ll continue with the traditional jQuery approach. That said, to create smooth scrolling with jQuery, we’ll take advantage of its animate() method.

Each time we click on a navigation link, we’ll do the following things:

Here’s the jQuery code:

And the related demo:

Solution Review

The major downside of this method is that you have to load an extra JavaScript library. On the contrary, it’s a reliable solution that will work well on different screens/devices and you can customize the scrolling speed. My recommendation is to use it only if your project already uses or needs jQuery.

5. Smooth Scrolling With Vanilla JavaScript

At this point, we’ll throw away jQuery and concentrate on two pure JavaScript solutions. Happily enough, it’s much simpler than you might expect.

Using the scroll() Method

First, we’ll use the scroll() method. The logic for this approach is similar to the previous jQuery implementation.

Here’s the required code:

Tip: instead of the scroll() method, we could equally have used the scrollTo() and scrollBy() methods. The effect should look the same.

Here’s the associated demo:

Using the scrollIntoView() Method

Here’s the code needed for this implementation:

Solutions Review

The native JavaScript version of smooth scrolling requires more code compared to the native CSS property. Like the CSS solution, it still lacks extended support, and there’s no easy way to control the scrolling speed unless we write our code.

6. Polyfills Please?

As already discussed, native smooth scrolling with CSS or JavaScript is still somehow limited.

However, there are polyfills out there in case you need them. For instance, there’s the Smooth Scroll polyfill with over 3.4k GitHub stars developed by Dustan Kasten.

To include it in your projects, grab it from a CDN, then insert it as a script tag before your JavaScript code.

In our case, as soon as we load it in one of our JavaScript demos, the scrolling animation will work in browsers like Safari and devices like iPad Mini 4. But, if we add it in our CSS demo, the scrolling animation won’t work on unsupported browsers/devices.

Here’s one of our aforementioned JavaScript demos with the polyfill embedded:

Conclusion

That’s it, folks! Today we covered some options for achieving smooth scrolling with CSS and JavaScript (including jQuery).

I hope you found this exercise useful and have enhanced your front-end knowledge a little bit. If you have ever built something similar in the past, please share it with us via social media.

Challenge: before closing, I have a small challenge for you! Your job is to extend one of our JavaScript demos by including a “back to top” button. The final functionality should work like this demo. Do you accept the challenge? If so, I’d be glad to see your solution!

Источник