How To Create A Scroll That Jumps Down In Increments The Size Of Your Viewport

I am trying to code an extremely basic website with html and css. Every time you scroll I want it to scroll the entire length of the window and a new paragraph (centered) to appear

Solution 1:

Based on your sketch I added:

• A navigation container which menu elements, which will have position: fixed, top: 20px and right: 20px, use the values which fit your needs. Also display: flex so the items are displayed as row. Keep in mind that the values are added to the <ul> tag, and not <nav>.

• Three div containers with text content. Each div has display: flex, justify-content: center and align-items: center, which will center the child elements horizontally and vertically to the center.

• Each div container will have width: 100% and height: 100vh, so remove the height and width value you added to the HTML in your css styling.

Hope this clears a bit more your situation, use flexbox, he's your new friends.

And here is a snippet:

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.part1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #2980b9;
}

.menu {
  display: flex;
  position: fixed;
  top: 20px;
  right: 20px;
}

.menuli {
  margin-left: 10px;
}

.part2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #2c3e50;
}

.part3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #16a085;
}

<nav><ulclass="menu"><li>Home</li><li>Item1</li><li>Item3</li><li>Item4</li><li>Item5</li></ul></nav><sectionclass="part1"><p>I am centered</p></section><sectionclass="part2"><p>I am centered</p></section><sectionclass="part3"><p>I am centered</p></section>

After that, you can add this one-page scroll with a nice animation: http://peachananr.github.io/onepage-scroll/Demo/demo.html

You would only have to wrap your <section>'s in a div.

<divclass="main"><section></section><section></section><section></section></div>