Scroll to section xprmnt

by ShaCP

HTML

<div id="container">
  <button id="scroll-to">
  Scroll to element
  </button>
  <div class="child one">
  </div>  
  <div class="child two">
  Scroll to me
  </div>
</div>

CSS

#container {
  max-width: 10rem;
}

.child {
  height: 500px;  
}

.one {
  background-color: red;
}

.two {
  margin-top: auto;
  display: none;
  background-color: blue;
}

* {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
}

JavaScript

const scrollToButton = document.getElementById("scroll-to");
const childTwo = document.querySelector(".two");
const container = document.getElementById("container");
scrollToButton.addEventListener("click", e => {
childTwo.style.display = "block";
const childTwoBottomPos = childTwo.getBoundingClientRect().bottom;
window.scrollTo({ top: childTwoBottomPos, behavior: 'smooth' })
})