No JS - Smooth Anchor Scrolling + Offset

index.html

<div class="omni-wrapper">
  <div class="omni">
    <p>No JS Smooth Scroll University</p>
    <div class="inline">
      <a href="#one">1</a>
      <a href="#two">2</a>
      <a href="#three">3</a>
      <a href="#four">4</a>
      <a href="#test">5</a>
      <a href="#middle">middle</a>
      <a href="#bottom">bottom</a>
    </div>
  </div>

</div>

<div class="main">
  <h1>pure html + css smooth anchor sssscrolling</h1>
  <section id="content">
    <p>Echo Park beard actually single-origin coffee ugh DIY semiotics blog keffiyeh hashtag Thundercats Pinterest twee tofu McSweeney's banjo salvia Truffaut leggings mlkshk VHS Cosby sweater sustainable retro stumptown mixtape distillery freegan PBR&B
      Kickstarter tousled forage hoodie asymmetrical bicycle rights tote bag try-hard chambray put a bird on it ethical viral biodiesel polaroid food truck Etsy Vice readymade photo booth meggings pork belly Helvetica four loko narwhal selvage locavore
      vinyl tattooed sartorial lo-fi PBR meh master cleanse fingerstache heirloom Shoreditch Intelligentsia trust fund church-key umami cardigan art party shabby chic Blue Bottle ennui swag Williamsburg kale chips Brooklyn Godard sriracha fixie organic
      3 wolf moon seitan cornhole kogi letterpress mustache drinking vinegar +1 raw denim bespoke Wes Anderson Tumblr bitters paleo hella deep v Odd Future gastropub wayfarers dreamcatcher pop-up authentic pug post-ironic cred synth gluten-free yr Banksy
      Bushwick High Life American Apparel flexitarian Portland slow-carb plaid roof party crucifix whatever cliche pour-over craft beer fap next level Tonx selfies direct trade you probably haven't heard of them iPhone scenester squid aesthetic Neutra
      Carles flannel jean shorts 90's fanny pack brunch Austin occupy messenger bag wolf XOXO small batch before they sold out mumblecore Pitchfork typewriter 8-bit Schlitz butcher disrupt farm-to-table irony banh mi kitsch fashion axe skateboard literally
      cray street art normcore YOLO chia artisan gentrify vegan pickled Marfa keytar chillwave quinoa lomo</p>
  </section>

  <section class="middle">
    <h2 id="middle">the middle</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/oKsxPW6i3pM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>

  <section class="rando">
   <li id="one">1</li>
   <li id="two">2</li>
   <li id="three">3</li>
   <li id="four">4</li>
   <li id="test">5</li>
  </section>
  <!-- <p id="bazinga"><a href="#1@#%^-bottom">Go to the bottom</a></p> -->
</div>

<section class="bottom">
  <div id="bottom">
    <h2>the bottom</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-1rzsT2t2YY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>

<a href="https://www.news.ycombinator.com">external link</a>
<div class="b2t">
  <a href="#">Go back to the top</a>
</div>

no-js-smooth-anchor-scrolling-offset.markdown

No JS - Smooth Anchor Scrolling + Offset

A Pen by nicholasnadel on CodePen.

License.

style.css

:root {
  --omniOffset: -150px;
}

html {
  scroll-behavior: smooth;
  font-family: monospace;
  font-size: 1.2rem;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* http: //stackoverflow.com/a/21707103/6220029 */

:target {
  padding-top: 100px;
  margin-top: -100px;
  display: inline-block;
}

/* works, but heading disappears */
/* :target {
  display: block;
  position: relative;
  visibility: hidden; 
  top: -200px; 
} */

.omni-wrapper {
  position: relative;
  display: block;
}

.omni {
  height: auto;
  background-color: #fafafa;
  border: 3px dotted black;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: white;
  position: fixed;
  width: 100vw;
  left: 0;
  top: 0;
  background-color: pink;
}

.main {
  margin-top: 100px;
}

h1 {
  height: 200px;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

section#content {
  min-height: 600px;
  background-color: orange;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

section.middle {
  min-height: 100vh;
  background-color: #a50034;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
section.rando {
  min-height: 100vh;
  background-color: blue;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#chapman {
  height: 100%;
}

section.bottom {
  background-color: purple;
  min-height: 100vh;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

h2 {
  color: white;
}

div.b2t {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: gold;
}

div.inline {
  display: inline-grid;
  justify-items: center;
grid-template-columns: 1fr repeat(10, auto);
  grid-column-gap: 5%;
  grid-row-gap: 50px;
}


@media screen and (max-width: 500px) {
  .omni {
    height: 200px;
    background-color: red;
  }

  :target {
    padding-top: 200px;
    margin-top: -200px;
    display: inline-block;
  }
}