У меня есть страница, которая демонстрирует плавную прокрутку к идентификатору с приведенными ниже подробностями:
Случай использования:
- Вкладки должны быть зафиксированы, когда прокрутка окна превышает 300 пикселей.
- При нажатии на определенную вкладку страница должна прокручиваться до нужного раздела без прокрутки тела.
Я нашел этот код ниже в каком-то потоке stackoverflow для анимации с определенным идентификатором, но, похоже, он прокручивает все тело при каждом нажатии на вкладку.
animate(elem, style, unit, from, to, time, prop) {
if (!elem) {
return;
}
const start = new Date().getTime(),
timer = setInterval(function() {
const step = Math.min(1, (new Date().getTime() - start) / time);
if (prop) {
elem[style] = from + step * (to - from) + unit;
} else {
elem.style[style] = from + step * (to - from) + unit;
}
if (step === 1) {
clearInterval(timer);
}
}, 25);
if (prop) {
elem[style] = from + unit;
} else {
elem.style[style] = from + unit;
}
}
Пожалуйста, проверьте прикрепленный код stackblitz для ссылки https://stackblitz.com/edit/angular-u1dfnc.
Проблема: при первом нажатии на вкладку раздела 1 она не прокручивается идеально, но когда я нажимаю на ту же вкладку во второй раз, она прокручивается правильно.
Может ли кто-нибудь помочь мне добиться правильной прокрутки до идентификатора при нажатии на вкладку, не заставляя тело прокручиваться.
PS: я также следил за плавной прокруткой ссылки не по всему телу , но определенный поток div, но это было в jQuery. Я пытаюсь добиться только с помощью javascript/typescript.
