JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<div class="wrapper">
<div class="button-wrapper">
  <div class="scroll-button">
    <a class="scroll" id="scroll-btn" href="#example">Scroll To</a>
  </div>
</div>

<div class="some">

</div>

<div class="bottom-div" id="anchor">
Bottom Div
</div>
</div>

CSS

.wrapper {
  height: 1000px;
  width: 100%;
  border: 1px solid red;
}

.button-wrapper {
  display: flex;
}

.some {
  height: 100px;
  width: 100%;
  margin: 20px 0 20px 0;
  border: 1px solid green;
}

.scroll-button {
  padding-left: 20px;
}

.bottom-div {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 20px 0 20px 0;
  border: 1px solid black;
}

JavaScript

document.getElementById('scroll-btn').onclick = function(){
 	const anchor = document.querySelector('#anchor')
  console.log(anchor)
  anchor.scrollIntoView();
}