Hoe krijg ik een scroll top toegevoegd

Met wat tutorials en andere code bekijken heb ik het volgende code gemaakt"

HTML:

<div class="slides">
  <div class="slide onscreen" id="one">one</div>
  <div class="slide" id="two">two</div>
  <div class="slide" id="third">third</div>
  <div class="slide" id="fourth">fourth</div>
</div>

<div class="buttons">

<button class="next" onclick="slide(this.className)">
  Next slide
</button>

<button class="prev" onclick="slide(this.className)">
  Previous slide
</button>
</div>

CSS:

.onscreen {
  background-color: green;
}

.buttons{
	width:170px;
	position:fixed;
	top:10px;
	left:50%;
	margin-left:-85px;
}

Javascriot:

<script>
window.onload = function() {
var slide = document.getElementsByClassName("slide");
for (var i = 0; i < slide.length; i++){
var heightslide = slide.offsetHeight;
}
console.log(heightslide);
}
  var active = document.getElementsByClassName("onscreen");

  function slide(prevnext) {
    if (prevnext === "next") {
      if (active[0].nextElementSibling) {
        active[0].nextElementSibling.className = "slide onscreen";
        active[0].className = "slide";
             
      }
   
    } else {
      if (active[0].previousElementSibling) {
        active[0].previousElementSibling.className = " slide onscreen ";
        active[active.length - 1].className = "slide";
      }
    }
  }
</script>

De code werkt prima maar wil graag dat het element dat actief word naar de bovenkant word gescrolld.
Ik had al een begin gemaakt met de offsetheight maar loop nu even vast wat ik nu moet doen

Kan iemand mij helpen hiermee?