Как сделать плавный переход к якорю(верстка)?

Question

[AlinaHeldman]

просто ничего не работает из того, что я находил. ни smooth, ни скрипты, ничего...

Comments

[profesor08]

Для начала надо продемонстрировать опробованные варианты.

[Андрей Шубников]

Вы точно пробовали искать? Например, https://github.com/iamdustan/smoothscroll

[Вадим]

Правила сервиса гласят:

2. Перед тем как задать вопрос пользователь Сервиса обязан:

2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.

https://qna.habr.com/search?q=%D0%BF%D0%BB%D0%B0%D...

Answer 1

[BornTo FreeFall]

Например, вот так:

html {
    scroll-behavior: smooth;
}

Но есть одна побочка, что не все браузеры поддерживают такой подход. Зато без JS)

Либо с элементами небольшого JS кода:

// Проходимся по всем элементам "linkList", и делаем выборку по ссылкам (a с атрибутом href, который равен "#")
const anchors = document.querySelectorAll('.linkList a[href*="#"]')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
  e.preventDefault()
   
  const blockID = anchor.getAttribute('href').substr(1)
   
  document.getElementById(blockID).scrollIntoView({
  behavior: 'smooth',
  block: 'start'
  })
  })
}

Comments

[Вадим]

behavior: 'smooth',

Тоже не Все поддерживают.
Огрызочная техника, например.
Без подключения полифила не обойдётся.
Либо через requestAnimationFrame самому скролить

Почему не работает плавная прокрутка к якорю в Safari?

[Сергей delphinpro]

Вадим, https://caniuse.com/css-scroll-behavior
В целом норм. можно юзать по принципу прогрессивного улучшения.
Яблочники подождут..

[Вадим]

Сергей delphinpro, Вы же понимаете, что вопрос всегда стоит в первую очередь несколько иначе.. Подождёт ли заказчик с яблоком..

[Сергей delphinpro]

Вадим, ну да. вы конечно правы. Правила диктует заказчик.

Answer 2

[Yaroslav]

Можете посмотреть FullPage . js

Answer 3

[ThunderCat]

Решение на жквери + ванила
Плюсы - работает красиво, аккуратно, в том числе и с динамически подгружаемыми элементами
Минусы - нужОн жквери, хотя можно переписать и без него, но будет длиннее и мне лениво )

$("body").on('click', '[href*="#"]', function(e){
            e.preventDefault();
            var fixed_offset = 100;
            if(this.hash){
                var tp = parseInt($(document.querySelector(this.hash)).offset().top);
                $('html,body').stop().animate({ scrollTop: tp - fixed_offset }, 1000);
            };
        });