How to make a smooth transition to the anchor (layout)?

Question

css

It just doesn't work from what I've found. no smooth, no scripts, nothing...

Answer 1

For example, like this:

html {
    scroll-behavior: smooth;
}

But there is one side effect that not all browsers support this approach. But without JS)
Or with elements of a small JS code:

// Проходимся по всем элементам "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'
  })
  })
}

Answer 2

You can see FullPage. js

Answer 3

Solution on jquery + vanilla
Pros - works beautifully, neatly, including with dynamically loaded elements
Cons - jkveri is needed, although it can be rewritten without it, but it will be longer and I'm lazy )

$("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);
            };
        });