Smooth Scrolling

by davidxmartins

HTML

<div id="section1">
  <h4>Section 1</h4>
  <h1>Smooth Scroll</h1>
<h2>ALL YOU NEED IS THE CODE BELLOW</h2>
<H3>
html {scroll-behavior: smooth;}
</H3>
  <a href="#section2">GO TO SECTION 02</a>
</div>

<div id="section2">
  <h4>Section 2</h4>
  <a href="#section1">GO TO SECTION 01</a>
</div>

CSS

html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif;
}

*{margin: 0; padding: 0; box-sizing: border-box;}

#section1 {
  height: 100%;
  background-color: #DDD;
  padding: 30px;
}

#section2 {
  height: 100%;
  background-color: #AAA;
  padding: 30px;
}

a {
  padding: 20px 40px;
  background: black;
  color: white;
  text-decoration: none;
  display: inline-block;
}

h1, h2, h3, h4, a {
  margin: 10px 0;
}