Плавная прокрутка к элементу: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в создании плавной прокрутки к элементам на странице с помощью JavaScript. Вы будете работать с различными HTML-структурами и применять JavaScript для реализации прокрутки к указанным якорям или элементам. Задания охватывают различные сценарии, от простых случаев до более сложных, с использованием разных подходов и методов. Вы научитесь находить элементы, определять их положение на странице и анимировать прокрутку, делая взаимодействие с вашими веб-страницами более удобным и приятным для пользователя.

Список тем

Прокрутка к якорю

Реализуйте плавную прокрутку к якорю `#section2` при клике на ссылку. Используйте JavaScript, чтобы обработать событие клика и выполнить прокрутку.

CSS

section { height: 500px; margin-bottom: 20px; border: 1px solid #ccc; }

HTML

Восстановить HTML

                      <a href="#section2">Перейти к Секции 2</a>
<section id="section1">Секция 1</section>
<section id="section2">Секция 2</section>
<section id="section3">Секция 3</section>

<a href="#section2">Перейти к Секции 2</a>
<section id="section1">Секция 1</section>
<section id="section2">Секция 2</section>
<section id="section3">Секция 3</section>

JavaScript

document.querySelector('input__1').addEventListener('input__2', function(event) {
  event.preventDefault();
  const targetElement = document.querySelector(input__3);
  targetElement.input__4({ behavior: input__5 });
});

                     document.querySelector('input__1').addEventListener('input__2', function(event) {
  event.preventDefault();
  const targetElement = document.querySelector(input__3);
  targetElement.input__4({ behavior: input__5 });
});

Используйте `querySelector` для получения ссылки и элемента, к которому нужно прокрутить. Затем используйте метод `scrollIntoView` с опцией `{ behavior: 'smooth' }`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка к элементу по ID

Создайте кнопку, при нажатии на которую будет происходить плавная прокрутка к элементу с ID `targetElement`.

CSS

div { height: 600px; margin-bottom: 20px; border: 1px solid #ccc; }
#targetElement { background-color: lightblue; }

HTML

Восстановить HTML

                      <button id="scrollButton">Прокрутить</button>
<div>Блок 1</div>
<div id="targetElement">Целевой элемент</div>
<div>Блок 3</div>

<button id="scrollButton">Прокрутить</button>
<div>Блок 1</div>
<div id="targetElement">Целевой элемент</div>
<div>Блок 3</div>

JavaScript

const scrollButton = document.getElementById(input__1);
scrollButton.addEventListener('click', () => {
  const target = document.input__2('targetElement');
  target.scrollIntoView({ behavior: input__3 });
});

                     const scrollButton = document.getElementById(input__1);
scrollButton.addEventListener('click', () => {
  const target = document.input__2('targetElement');
  target.scrollIntoView({ behavior: input__3 });
});

Используйте `getElementById` для получения целевого элемента и `scrollIntoView` с опцией `{ behavior: 'smooth' }` для плавной прокрутки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка с использованием offset

Сделайте плавную прокрутку к элементу с классом `target-section`, но с отступом сверху в 100 пикселей.

CSS

.target-section { height: 400px; margin-top: 200px; border: 1px solid #ccc; background-color: lightgreen; }

HTML

Восстановить HTML

                      <button id="offsetButton">Прокрутить с отступом</button>
<div style="height: 800px;"></div>
<div class="target-section">Целевая секция</div>

<button id="offsetButton">Прокрутить с отступом</button>
<div style="height: 800px;"></div>
<div class="target-section">Целевая секция</div>

JavaScript

document.getElementById('offsetButton').addEventListener('click', () => {
  const element = document.querySelector(input__1);
  const offset = input__2;
  const bodyRect = document.body.getBoundingClientRect().top;
  const elementRect = element.getBoundingClientRect().top;
  const elementPosition = elementRect - bodyRect;
  const offsetPosition = elementPosition - offset;

  window.scrollTo({
    top: input__3,
    behavior: 'smooth'
  });
});

                     document.getElementById('offsetButton').addEventListener('click', () => {
  const element = document.querySelector(input__1);
  const offset = input__2;
  const bodyRect = document.body.getBoundingClientRect().top;
  const elementRect = element.getBoundingClientRect().top;
  const elementPosition = elementRect - bodyRect;
  const offsetPosition = elementPosition - offset;

  window.scrollTo({
    top: input__3,
    behavior: 'smooth'
  });
});

Используйте `querySelector` для получения элемента. Затем получите его `getBoundingClientRect().top` и добавьте к нему отступ. Используйте `window.scrollTo` с опцией `{ top: ..., behavior: 'smooth' }`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка к изображению

При клике на кнопку прокрутите страницу к изображению с классом "gallery-image".

CSS

.gallery-image { margin-top: 800px; display: block; }

HTML

Восстановить HTML

                      <button id="scrollToImageBtn">Прокрутить к изображению</button>
<img src="https://naytikurs.ru/img/1.png" class="gallery-image" alt="Image">

<button id="scrollToImageBtn">Прокрутить к изображению</button>
<img src="https://naytikurs.ru/img/1.png" class="gallery-image" alt="Image">

JavaScript

document.getElementById(input__1).addEventListener('click', function() {
  const image = document.querySelector(input__2);
  input__3.scrollIntoView({ behavior: input__4 });
});

                     document.getElementById(input__1).addEventListener('click', function() {
  const image = document.querySelector(input__2);
  input__3.scrollIntoView({ behavior: input__4 });
});

Используйте `querySelector` для нахождения кнопки и изображения. Используйте `scrollIntoView({ behavior: 'smooth' })` для плавной прокрутки к изображению.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка к следующей секции

Реализуйте плавную прокрутку к следующей секции при клике на текущую секцию. Секции имеют класс `section`.

CSS

.section { height: 400px; margin-bottom: 20px; border: 1px solid #ccc; cursor: pointer; }

HTML

Восстановить HTML

                      <div class="section">Секция 1</div>
<div class="section">Секция 2</div>
<div class="section">Секция 3</div>

<div class="section">Секция 1</div>
<div class="section">Секция 2</div>
<div class="section">Секция 3</div>

JavaScript

const sections = document.querySelectorAll(input__1);

sections.forEach(section => {
  section.addEventListener('click', () => {
    const nextSection = section.input__2;
    if (nextSection) {
      nextSection.scrollIntoView({ behavior: input__3 });
    }
  });
});

                     const sections = document.querySelectorAll(input__1);

sections.forEach(section => {
  section.addEventListener('click', () => {
    const nextSection = section.input__2;
    if (nextSection) {
      nextSection.scrollIntoView({ behavior: input__3 });
    }
  });
});

Используйте `querySelectorAll` для получения всех секций. Добавьте обработчик события `click` к каждой секции. Внутри обработчика найдите следующую секцию, используя `nextElementSibling`, и прокрутите к ней с помощью `scrollIntoView({ behavior: 'smooth' })`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка к началу страницы

Добавьте кнопку, при нажатии на которую страница плавно прокручивается к началу.

HTML

Восстановить HTML

                      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><button id="backToTop">Наверх</button>
<div style="height: 1500px;"></div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><button id="backToTop">Наверх</button>
<div style="height: 1500px;"></div>

JavaScript

document.getElementById('backToTop').addEventListener(input__1, () => {
  window.scrollTo({
    top: input__2,
    behavior: input__3
  });
});

                     document.getElementById('backToTop').addEventListener(input__1, () => {
  window.scrollTo({
    top: input__2,
    behavior: input__3
  });
});

Используйте `window.scrollTo` с опцией `{ top: 0, behavior: 'smooth' }`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка к элементу, если он не виден

Прокрутите к элементу с ID `hiddenElement` только в том случае, если он не виден в области просмотра.

CSS

#hiddenElement { margin-top: 1500px; }

HTML

Восстановить HTML

                      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><button id="scrollIfHidden">Прокрутить, если скрыт</button>
<div id="hiddenElement">Скрытый элемент</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><button id="scrollIfHidden">Прокрутить, если скрыт</button>
<div id="hiddenElement">Скрытый элемент</div>

JavaScript

document.getElementById('scrollIfHidden').addEventListener('click', () => {
  const element = document.getElementById('hiddenElement');
  const rect = element.getBoundingClientRect();

  if (input__1 < 0 || rect.top >= input__2) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
});

                     document.getElementById('scrollIfHidden').addEventListener('click', () => {
  const element = document.getElementById('hiddenElement');
  const rect = element.getBoundingClientRect();

  if (input__1 < 0 || rect.top >= input__2) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
});

Используйте `getBoundingClientRect()` для получения размеров и положения элемента. Проверьте, находится ли `top` элемента ниже нижней границы окна просмотра (`window.innerHeight`). Если да, прокрутите к элементу.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка по вертикали и горизонтали

Сделайте плавную прокрутку к элементу с классом `.target`, учитывая как вертикальное, так и горизонтальное смещение. Элемент находится далеко справа и внизу.

CSS

.container { width: 2000px; height: 1500px; position: relative; }
.target { position: absolute; bottom: 100px; right: 100px; background-color: yellow; }

HTML

Восстановить HTML

                      <button id="scrollBoth">Прокрутить</button>
<div class="container">
  <div class="target">Цель</div>
</div>

<button id="scrollBoth">Прокрутить</button>
<div class="container">
  <div class="target">Цель</div>
</div>

JavaScript

document.getElementById('scrollBoth').addEventListener('click', () => {
  const element = document.querySelector('.target');
  const rect = element.getBoundingClientRect();

  window.scrollBy({
    left: input__1,
    top: input__2,
    behavior: 'smooth'
  });
});

                     document.getElementById('scrollBoth').addEventListener('click', () => {
  const element = document.querySelector('.target');
  const rect = element.getBoundingClientRect();

  window.scrollBy({
    left: input__1,
    top: input__2,
    behavior: 'smooth'
  });
});

Используйте `getBoundingClientRect()` для получения координат элемента относительно окна просмотра. Используйте `window.scrollBy` с опцией `{ left: ..., top: ..., behavior: 'smooth' }`. `scrollBy` прокручивает *на* указанное количество пикселей, а не *к*.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Прокрутка к динамически созданному элементу

Создайте новый элемент (div) с текстом "Новый элемент" и добавьте его в конец `body`. Затем сделайте плавную прокрутку к этому новому элементу.

HTML

Восстановить HTML

                      <button id="createAndScroll">Создать и прокрутить</button>

<button id="createAndScroll">Создать и прокрутить</button>

JavaScript

document.getElementById('createAndScroll').addEventListener('click', () => {
  const newElement = document.input__1('div');
  newElement.textContent = input__2;
  document.body.input__3(newElement);
  newElement.scrollIntoView({ behavior: 'smooth' });
});

                     document.getElementById('createAndScroll').addEventListener('click', () => {
  const newElement = document.input__1('div');
  newElement.textContent = input__2;
  document.body.input__3(newElement);
  newElement.scrollIntoView({ behavior: 'smooth' });
});

Используйте `document.createElement` для создания элемента, `textContent` для добавления текста, `appendChild` для добавления элемента в `body`, и `scrollIntoView` для прокрутки.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку