How to scroll to the bottom of the selected div?-CodePudding

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 >
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
</div>

<button id="scrl">
  scroll
</button>

CodePudding user response：

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 >
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >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 >
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
</div>

<button id="scrl">
          scroll
        </button>

CodePudding user response：

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 >
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
  <h1 >Test</h1>
</div>