Question

我正在尝试实现一个简单的按钮，点击它会在我的部分之间向上或向下滚动页面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);
    });
}

Answer 1

有a few ways to get viewport size in JavaScript。使用其中一种方法，您应该可以使用视口大小代替1000滚动。

例如，如果我想用window.innerHeight精确滚动一个视口的高度：

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

Answer 2

＆＃13;

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);
  });
});

＆＃13;

body {
  margin: 0;
}

.section {
  width: 100%;
  height: 100vh;
}

.section-1 {
  background-color: blue;
}

.section-2 {
  background-color: red;
}

.section-3 {
  background-color: green;
}

＆＃13;

<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>

＆＃13;

点击向上或向下滚动100vh纯javascript

2 个答案: