При нажатии прокрутка вверх или вниз 100vh чистый javascript

Я пытаюсь реализовать простую кнопку, которая при нажатии будет прокручивать страницу вверх или вниз на 100vh между моими разделами. Я вижу множество примеров, делающих это с помощью jQuery, но я ищу решение на чистом javascript. Я не знаю, как этого добиться.

Ценю любой совет.

HTML

<section class = "section section-1">
  <div class = "btn"></div>
</section>
<section class = "section section-2">
  <div class = "btn"></div>
</section>
<section class = "section section-3">
  <div class = "btn"></div>
</section>

CSS

.section {
  width: 100%;
  height: 100vh:
}

Это то, что я придумал до сих пор

for (var s = 0; s < btn.length; s++) {
    btn[s].addEventListener('click', function(){
        window.scrollBy(0,1000);
    });
}

javascript

06.06.2018 17:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 738

Ответы 2

Есть несколько способов получить размер области просмотра в JavaScript. Используя один из этих способов, вы сможете прокручивать, как вы используете размер области просмотра вместо вашего 1000.

Например, если бы я хотел прокрутить ровно высоту одного окна просмотра с помощью window.innerHeight:

let pageHeight = window.innerHeight;
window.scrollBy(0, pageHeight);

06.06.2018 17:18

document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', function() {
    let scrollDistance = document.documentElement.clientHeight;
    if (btn.className.split(' ').includes('scroll-up')) {
      scrollDistance *= -1;
    }
    window.scrollBy(0, scrollDistance);
  });
});

body {
  margin: 0;
}

.section {
  width: 100%;
  height: 100vh;
}

.section-1 {
  background-color: blue;
}

.section-2 {
  background-color: red;
}

.section-3 {
  background-color: green;
}

<section class = "section section-1">
  <div class = "btn scroll-down">V</div>
  <div class = "btn scroll-up">^</div>
</section>
<section class = "section section-2">
  <div class = "btn scroll-down">V</div>
  <div class = "btn scroll-up">^</div>
</section>
<section class = "section section-3">
  <div class = "btn scroll-down">V</div>
  <div class = "btn scroll-up">^</div>
</section>

06.06.2018 17:24

Другие вопросы по теме

Можно ли динамически создать элемент IMG и получить к нему доступ с помощью document.GetElementById (name);

Добавление динамической строки в таблицу, но при этом очищаются данные в строке

Как создать собственный узел в VisJS

Связывание мобильных страниц JQuery. Один с пользовательским вводом, а другой с результатами

Компонент DRAWER в @ material-ui / core не отображается, если для свойства "open" задано значение "true"

Как отключить опцию выбора

Объединение объектов из массива на основе значения свойства

Используйте дочерний метод в родительском компоненте

Модальное окно, блокирующее определенный элемент на странице

Как сделать HTTP-запрос CORS к приложению Angular

При нажатии прокрутка вверх или вниз 100vh чистый javascript

Ответы 2

Другие вопросы по теме

Похожие вопросы