JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="links">
  <a href="#id1">id1</a>
  <a href="#id2">id2</a>
  <a href="#id3">id3</a>
  <div class="link" data-id="1">scrollIntoView id1</div>
  <div class="link" data-id="2">scrollIntoView id2</div>
  <div class="link" data-id="3">scrollIntoView id3</div>
</div>
<div class="wells">
  <div class="well">
    <div class="spacer"></div>
    <div class="sticky"></div>
    <div id="id1" class="id">id1</div>
    <div class="spacer"></div>
  </div>
  <div class="well">
    <div class="spacer"></div>
    <div class="fixed"></div>
    <div id="id2" class="id">id2</div>
    <div class="spacer"></div>
  </div>
  <div class="well">
    <div class="spacer"></div>
    <div class="sticky top-15"></div>
    <div id="id3" class="id">id3</div>
    <div class="spacer"></div>
  </div>
</div>

CSS

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
.wells {
  display: flex;
}
.well {
  flex: 1 1 auto;
}
.spacer {
  height: 100vh;
  background: lightblue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 15vh;
  opacity: .5;
  background: green;
}
.top-15 {
  top: 15vh;
}
.fixed {
  position: fixed;
  top: 0;
  left: calc(100% / 3);
  right: calc(100% / 3);
  height: 15vh;
  opacity: .5;
  background: green;
}
.id {
  height: 15vh;
  background: pink;
}
.links {
  margin-top: 15vh;
}
.link {
  cursor: pointer;
  color: blue;
}

JavaScript

document.querySelectorAll('.link').forEach(
  function(item, index, arr) {
  	var id = '#id' + arr[index].dataset.id;
    arr[index].addEventListener('click',function(){
      document.querySelector(id).scrollIntoView();
    });
  }
);