How to scroll to the bottom of the selected div?

Question

How can I scroll to the bottom of the desired div? Right now, it will add the height value to the scrollTop which will made the scroll to scroll to only that specific height. I want it to scroll down to the last of the 5th div. There are 9 h1, so I want it to scroll upto the bottom of the 5th h1

 const scrollbtn = document.getElementById('scrl'); var objDiv = document.querySelectorAll('.each'); const mycontainer = document.querySelector('.container'); scrollbtn.addEventListener('click', () => { const itemHeight = objDiv[5].scrollHeight; mycontainer.scrollTop += itemHeight; })

 body { background: tomato; scroll-behavior: smooth; }.container { max-height: 200px; overflow-y: scroll; background: white; scroll-behavior: smooth; }.each { padding-top: 10px; background: lightblue; }

 <div class="container"> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> </div> <button id="scrl"> scroll </button>

Answer 1

You can use scrollIntoView

scrollbtn.addEventListener('click', () => {
  objDiv[objDiv.length-1].scrollIntoView(); // change objDiv.length-1 to 4 if you want to scroll to the 5th H
})

You can add options like {behavior: "smooth", block: "end", inline: "nearest"}

 const scrollbtn = document.getElementById('scrl'); var objDiv = document.querySelectorAll('.each'); const mycontainer = document.querySelector('.container'); scrollbtn.addEventListener('click', () => { objDiv[objDiv.length - 1].scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }) })

 body { background: tomato; scroll-behavior: smooth; }.container { max-height: 200px; overflow-y: scroll; background: white; scroll-behavior: smooth; }.each { padding-top: 10px; background: lightblue; }

 <button id="scrl"> scroll </button> <div style="height:500px">Dummy to see the behaviour of the page</div> <div class="container"> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> </div>

Answer 2

Jump to the 5th div immediately

 const scrollbtn = document.getElementById('scrl'); var objDiv = document.querySelectorAll('.each'); const mycontainer = document.querySelector('.container'); scrollbtn.addEventListener('click', () => { mycontainer.scrollTop = objDiv[0].scrollHeight * 5 //the first height multiple by 5 })

 body { background: tomato; scroll-behavior: smooth; }.container { max-height: 200px; overflow-y: scroll; background: white; scroll-behavior: smooth; }.each { padding-top: 10px; background: lightblue; }

 <div class="container"> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> </div> <button id="scrl"> scroll </button>

Go through one by one till reaching out the the 5th

 const scrollbtn = document.getElementById('scrl'); var objDiv = document.querySelectorAll('.each'); const mycontainer = document.querySelector('.container'); let interval scrollbtn.addEventListener('click', () => { if (interval) { clearInterval(interval) } let index = 1 interval = setInterval(() => { const itemHeight = objDiv[0].scrollHeight; mycontainer.scrollTop += itemHeight; index++ if (index === 6) { //if it's already gone to the 5th, break the interval clearInterval(interval) } }, 300) })

 body { background: tomato; scroll-behavior: smooth; }.container { max-height: 200px; overflow-y: scroll; background: white; scroll-behavior: smooth; }.each { padding-top: 10px; background: lightblue; }

 <div class="container"> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> <h1 class="each">Test</h1> </div> <button id="scrl"> scroll </button>