如何滾動到所選div的底部？

Question

如何滾動到所需 div 的底部？ 現在，它會將高度值添加到 scrollTop，這將使滾動僅滾動到該特定高度。 我希望它向下滾動到第 5 個 div 的最后一個。 有 9 個 h1，所以我希望它滾動到第 5 個 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

您可以使用scrollIntoView

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

您可以添加選項，例如{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

立即跳轉到第 5 格

 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 一個接一個到第5個

 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>