Плавная прокрутка к якорю средствами css?

Question

[iugi]

Здравствуйте! Есть ли возможность сделать прокрутку до якоря на странице, только на css? Если да, то как?

Answer 1

[0X12eb]

Есть конечно же такая возможность: jsfiddle

Comments

[jeruthadam]

Прикольный хак.

[iugi]

То что нужно!

[Exploding]

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

[cssfish]

прикольно, но это скорее ближе к каруселям )) так что нету без js плавной прокрутки )

Answer 2

[humvn]

html {
scroll-behavior: smooth;
}

Comments

[Egor]

Просто нет слов! Сидел ломал голову над JS вариантами, а оказывается всё решается 3-мя строчками, да еще и в HTML.
Спасибо, дорогой коллега!!

[Brendan Castaneda]

Egor, Egor,
Было-бы хорошо так если-бы не было-бы так плохо с поддержкой на остальных браузерах...
scroll-behavior: smooth;
Даже если откинуть все малоиспользуемые браузеры остаются Safari и IE без поддержки..
Решение не подходит (если конечно вы не решили забить на пользователе тех браузеров)

[Bakhtin_PA]

На сегодняшний день показывает, что полная поддержка.

Answer 3

[Алекс Глебов]

css ничего не знает про скролл
в чем проблема нагуглить js решение?

Comments

[iugi]

интересно все-таки

[Дмитрий]

А ниже что написано?

html {
scroll-behavior: smooth;
}

Answer 4

[vladimir_html]

Зачем засорять CSS десятками строк кода, если существует вот такое простое решение на jQuery?
https://impuls-web.ru/plavnaya-prokrutka-stranicy-...

Comments

[Дмитрий]

десятками? Выше же человек написал одно единственное свойство которое это делает

[Z_Epic]

Отлично! Спасибо!

[OGuman]

Дмитрий, где делает? Оно ничего не делает. Бесполезный ответ

Answer 5

[Brendan Castaneda]

Вы можете воспользоваться полифилами
Просто перейдите по этой ссылке в github репозиторий и установите его в свой проект.

Поддержка в браузерах:

• Изначально поддерживается в Chrome и Firefox
  
• Safari 6+
  
• Internet Explorer 9+
  
• Microsoft Edge 12+
  
• Opera Next
  

Его довольно просто использовать

let button1 = document.getElementById('button1');
let button2 = document.getElementById('button2');
let formaSend = document.getElementById('main-form');
button1.addEventListener('click', smoothscroll);
button2.addEventListener('click', smoothscroll);

function smoothscroll() {
    formaSend.scrollIntoView({ behavior: 'smooth' });
}

Answer 6

[Stalker_RED]

В css прокрутку сделать нельзя, но можно в самом html

<a href="#yakor">прокрутка до yakor</a>
<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz<br><br><br><br><br>zz
<a id="yakor"></a>
<br><br>zz

https://jsfiddle.net/55wp2bu1/

И это действительно прокрутка страницы, а не перемещение элементов по странице как у 0X12eb

Comments

[iugi]

Но она не плавная, а про якори я знал.