Свойство scroll-behavior

Описание

Определяет поведение прокрутки внутри элемента — плавная прокрутка или мгновенный переход.

Синтаксис

scroll-behavior: auto | smooth;
Значение Описание
auto Переход к элементу внутри блока с прокруткой происходит мгновенно.
smooth Прокрутка происходит плавно. Время и функция перехода устанавливаются непосредственно браузером.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<nav class='nav-t'>
 <a class='a-t' href='#page-1'>1</a>
 <a class='a-t' href='#page-2'>2</a>
 <a class='a-t' href='#page-3'>3</a>
 </nav>
 <div class='scroll-container'>
 <div class='scroll-page' id='page-1'>1</div>
 <div class='scroll-page' id='page-2'>2</div>
 <div class='scroll-page' id='page-3'>3</div>
 </div>
 <style>
 .a-t {
 display: inline-block;
 width: 50px;
 text-decoration: none;
 color: rgb(227, 0, 0);
 }
 .nav-t,
 .scroll-container {
 display: block;
 margin: 0 auto;
 text-align: center;
 }
 .nav-t {
 width: 339px;
 padding: 5px;
 border: 1px solid black;
 }
 .scroll-container {
 width: 350px;
 height: 200px;
 overflow-y: scroll;
 scroll-behavior: smooth;
 }
 .scroll-page {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
 font-size: 5em;
 }
 </style>
</body>
</html>
1
2
3

Читайте также