Как сделать плавный скролл к якорю на чистом js?

Question

[eugene_d_dev]

Допустим header с nav. Вот при нажатии на ссылку должна происходить плавная прокрутка до определенного элемента. Можно ли определить Положение элемента по оси Y в body прямым методом? Или нужно складывать предыдущие элементы? Я просто ни разу такое не делал. В интернета мало подробного описания. Предлагают в основном использовать библиотеки. Если кому не трудно - пожалуйста объясните немного код, который вы напишите в ответ. Особенно анимацию.

Answer 1

[Виталий Инчин ☢]

Когда-то от балды что-то подобное писал, но довести до ума было лень. Посмотрите основной принцип работы.

https://github.com/In4inQ/js/blob/master/%D0%9F%D0...

Информация по функции

Вызов функции:

scrollTo4Y(DOM Element/Y [,speed [,boolean]]);
//Первый параметр - элемент или Y-позиция, до которой крутим
//Второй - скорость, лучше не трогать. Она и так исходя из расстояния вычисляется.
//Третий - уже не помню, вроде бы, если указан элемент, то определяет вариант прокрутки: 
// - До видимости элемента
// - До того, как он окажется вверху страницы...

Ах да, еще есть ключевые слова для первого аргумента:

back - на предыдущее место прокрутки
bottom, top - низ и верх, соответственно

Comments

[eugene_d_dev]

Это работает, но я просил расписать процесс реализации, а не использования. Хочу сделать свой скроллинг. Буду благодарен за разъяснения.

[Виталий Инчин ☢]

fajjet: Ну так пройдитесь по моему коду, там даже комментарии есть.
В целом процесс такой:

1. Получаем координаты элемента относительно прокрутки, используя метод getBoundingClientRect.

2. Вычисляем среднюю скорость либо с самого начала либо при каждом вызове интервала (3 пункт). Моя формула такова: where*length/(speed||1000), где where это 1 или -1, сторона прокрутки, leength - расстояние до точки, в которую скроллим от текущей прокрутки. И speed - скорость,

3. Запускаем интервал (скорость - 1), который скроллит на вычесленую скорость с помощью метода scrollTo. И тут важный момент - останавливать таймер надо при условии, что текущая прокрутка >= целевой, т.к, может перемахнуть в связи с тем, что скорость может равняться дробному числу, а scrollTo скроллит только целые.

[eugene_d_dev]

Виталий Инчин: Спасибо, попробую разобраться с учетом, что плохо знаю js синтаксис.