КодSEOБлогИное

Плавный скроллинг страницы до якоря

scroll-behavior

обычная прокрутка к якорю внутри контейнера
плавная прокрутка к якорю внутри контейнера
auto
наследует значение родителя
auto
НАЖАТЬ1 НАЖАТЬ2 НАЖАТЬ3 
1
11
111
2
22
222
2222
22222
222222
2222222
3
33
333
3333
<style>
html {
  scroll-behavior: auto; /* свойство scroll-behavior не наследуется, применяется к прокручиваемым блокам */ 
}
</style>

<a href="#page1">НАЖАТЬ1</a>&emsp;
<a href="#page2">НАЖАТЬ2</a>&emsp;
<a href="#page3">НАЖАТЬ3</a>&emsp;
<div id="page1">1<br>11<br>111</div>
<div id="page2">2<br>22<br>222<br>2222<br>22222<br>222222<br>2222222</div>
<div id="page3">3<br>33<br>333<br>3333</div>

Где использовать: для того, чтобы сделать меню с ссылками на части статьи с видимым глазу перемещением.

Плавный переход внутри вложенного блока

Бычок | Зайка | Мишка | Буква «Р» | Снегирь 
<!-- На странице http://shpargalkablog.ru/demo/7/ поместить информацию в iframe  -->

<!DOCTYPE html>
<meta charset="utf-8" />
<style>
html {
  scroll-behavior: smooth;
}
p {
  white-space: pre-line;
}
</style>
<h1>Агния Барто</h1>
<h2 id="steer">Бычок</h2>
<p>Идет бычок, качается,
Вздыхает на ходу:
- Ох, доска кончается,
Сейчас я упаду!
<h2 id="bunny">Зайка</h2>
<p>Зайку бросила хозяйка -
Под дождем остался зайка.
Со скамейки слезть не мог,
Весь до ниточки промок.

<!-- На странице http://shpargalkablog.ru/2017/09/scroll-behavior.html -->

<a href="http://shpargalkablog.ru/demo/7/#steer" target="raz">Бычок</a> |
<a href="http://shpargalkablog.ru/demo/7/#bunny" target="raz">Зайка</a>
<iframe src="http://shpargalkablog.ru/demo/7/" name="raz" style="display:block; width: 100%; box-sizing: border-box; height:10em;"></iframe>
◄▲►
Все комментарии