Scrrol To Top

Scrol To top using offsetTop

by Kondal Durgam

HTML

<div id="container">
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p id="inner-element">D</p>
    <p>E</p>
    <p>F</p>
  </div>
<button onclick="scrollToElementD()">SCROLL TO D</button>

CSS

div {
    height: 200px;
    width: 100px;
    border: 1px solid black;
    overflow: auto;
}

p {
    height: 80px;
    background: blue;
}
#inner-element {
    background: red;
}

JavaScript

function scrollToElementD(){
    var topPos = document.getElementById('inner-element').offsetTop;
    document.getElementById('container').scrollTop = topPos-10;
}