Помогите, пожалуйста, реализовать плавную прокрутку к первому экрану сайта (самый верх). У меня на странице две кнопки (в нижнем углу первого экрана и в конце странице).
Первая кнопка плавно прокручивает первый экран. Сделано.
Вторая должна также плавно скролить страницу к первому экрану.
У меня есть класс, в котором есть два метода ScrollDown и ScrollUp.
ScrollDown - скролит плавно ScrollUp - в данный момент без плавного скрола.
export default class {
constructor() {
this.buttonScrollDown = document.querySelector(
'button[data-action="scroll-down"]'
);
this.buttonScrollUp = document.querySelector(
'button[data-action="scroll-up"]'
);
this.bindEvents();
}
scrollDown() {
const windowCoords = document.documentElement.clientHeight;
(function scroll() {
if (window.pageYOffset < windowCoords) {
window.scrollBy(0, 10);
setTimeout(scroll, 0);
}
if (window.pageYOffset > windowCoords) {
window.scrollTo(0, windowCoords);
}
})();
console.log("Scroll the first screen");
}
scrollUp() {
const windowCoords = document.documentElement.clientHeight;
(function scroll() {
if (window.pageYOffset < windowCoords) {
window.scrollBy(0, 10);
setTimeout(scroll, 0);
}
if (window.pageYOffset > windowCoords) {
window.scrollTo(0, 0);
}
})();
console.log("Scroll to the first screen");
console.log(this.buttonScrollUp);
}
bindEvents() {
if (this.buttonScrollDown) {
this.buttonScrollDown.addEventListener("click", () => {
this.scrollDown();
});
}
if (this.buttonScrollUp) {
this.buttonScrollUp.addEventListener("click", () => {
this.scrollUp();
});
}
}
}