向下滚动整个浏览器窗口

Question

我正在制作一个网站，这是我目前的设置：

http://puu.sh/hU5KJ/421b5aa76d.png

我有 2 个主 div，起初粗体显示在整个浏览器窗口中，单击按钮后，整个窗口向下滚动到第二个 div。 div 按字面意思放置在图片中，下部 div 不在屏幕上，向下滚动功能是一个简单的 javascript。

我的主要问题是，这可以通过其他方式完成吗？这感觉有点不对劲，每当我在较低的 div 并调整浏览器窗口的高度时，它都会变得一团糟。

编辑：

我想拥有它，这样除了那些按钮（没有箭头键、没有鼠标滚轮，最好没有 pg 向下/向上按钮）之外，它不可能通过任何其他方式滚动。这甚至可能吗？

HTML 构建：

  <div id="wrapper">
  <div id = "overall"></div>
  <div id = "chat"></div>
  </div>

“整体”是图像上的粗体 div，“聊天”是较低的 div。我在这些 div 中放置了很多其他东西，如果你想要完整的代码，我可以发布它，但这主要是关于仅在这 2 个之间切换。

CSS：

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

#wrapper {
  overflow-y: hidden;
  overflow-x: hidden;
}

#overall {
  background-color: red;
  height: 100%;
  width: 100%;
  text-align: center;
}

#chat {
  width: 100%;
  height: 100%; 
  overflow-x: hidden;
  overflow-y: hidden;
}

以及滚动的JS函数：

function scrollDown() {


    $('html, body').animate({
        scrollTop: $("#chat").offset().top
    }, 1000);

}



function scrollUp() {


    $('html, body').animate({
        scrollTop: $("#overall").offset().top
    }, 1000);
}

我的知识水平很低，我想你可以看到我现在只了解最基本的东西，所以请解释你的答案。谢谢你的帮助。

Answer 1

关键是使用 CSS width:100% & height:100% 属性。这些将确保您的元素的大小始终与浏览器的全尺寸一致。即使你调整它的大小。

$(document).ready(function() {
  $("#scroll-down").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: $("#block2").offset().top + 'px'
    }, 'slow');
  })
  $("#scroll-up").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: $("#block1").offset().top + 'px'
    }, 'slow');
  });
});

html,
body {
  height: 100%;
}
.full-size {
  display: block;
  width: 100%;
  height: 100%;
}
#block1 {
  background-color: red;
}
#block2 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
  <div class="full-size" id="block1">
    <a href="#block2" id="scroll-down">scroll down</a>
  </div>
  <div class="full-size" id="block2">
    <a href="#block1" id="scroll-up">scroll up</a>
  </div>
</div>

编辑：包含 JS 平滑滚动