Как щелком по кнопке плавно проскролить на нужное расстояние?

Question

[art style]

Хочу по клику на гиперссылку или кнопку плавно проскролить допустим на 500 пикселей вниз. с чистым html реально реализовать?

Comments

[Rustam Bainazarov]

Нет.

Можно только до конкретного пункта по якорю через CSS в современных браузерах:
https://developer.mozilla.org/en-US/docs/Web/CSS/s...

Более сложные и полноценные механизмы — только JS.

[Vaultboy84]

Рустам Байназаров, и то использовать это нельзя, так как в сафари, судя по доке это не работает.

[Rustam Bainazarov]

Vaultboy84, во всех неподдерживаемых браузерах будет просто переходить по якорю без анимации (как это обычно происходит), поэтому использовать можно, если этот нюанс не вредит UX. А так, он ничего не ломает.

[Vaultboy84]

Рустам Байназаров, к сожалению у меня на работе упор на айос, поэтому как раз на нем в первую очередь должно быть все по красоте. (

Answer 1

[Александр]

Делаете обычный якорь, для тэга html пишите scroll-behavior: smooth;.

Answer 2

[MisTFoR]

Вот пример:

<a href="#block">Кнопка</a>
<div id="block">Блок</div>