1

Помогите, пожалуйста, реализовать плавную прокрутку к первому экрану сайта (самый верх). У меня на странице две кнопки (в нижнем углу первого экрана и в конце странице).

Первая кнопка плавно прокручивает первый экран. Сделано.

Вторая должна также плавно скролить страницу к первому экрану.

У меня есть класс, в котором есть два метода 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();
      });
    }
  }
}

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.