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>

mplungjan · Answer 1 · 2022-04-13T07:49:14.487

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>

edited Apr 13 '22 at 07:49

answered Apr 13 '22 at 07:30

mplungjan

169,008
28
173
236

its scrolling to the end of page and the div – Joel Smith Apr 13 '22 at 07:32
And what is expected behaviour? To not scroll the page? – mplungjan Apr 13 '22 at 07:45
I have updated the question, please check it :) – Joel Smith Apr 13 '22 at 07:47
You can change objDiv.length-1 to 4 or 5 if you want – mplungjan Apr 13 '22 at 07:49
it scroll to the fifth one but not perfectly, it stops at middle of the 5th – Joel Smith Apr 13 '22 at 08:36
Change some option as you wish https://stackoverflow.com/questions/8922107/javascript-scrollintoview-middle-alignment – mplungjan Apr 13 '22 at 08:38
https://jsfiddle.net/xmurodz0/1/, when we keep clicking on the button it will progress to the next div, but at some point when it reaches the last div and when we click on the button it console log :- `Uncaught TypeError: Cannot read properties of undefined (reading 'scrollIntoView')` – Joel Smith Apr 13 '22 at 10:22
https://jsfiddle.net/mplungjan/sbt8qmg9/ `if (myvalue >= objDiv.length) return;` – mplungjan Apr 13 '22 at 10:41

Nick Vu · Answer 2 · 2022-04-13T07:54:36.690

1

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>

edited Apr 13 '22 at 07:54

answered Apr 13 '22 at 07:31

Nick Vu

14,512
4
21
31

its scrolling to the end of the div, I want it to scroll to the end of the 5th `
Test
` – Joel Smith Apr 13 '22 at 07:35
you want to scroll to the 5th immediately or go through one by one? @JoelSmith – Nick Vu Apr 13 '22 at 07:38
I want to learn both ways, generally I want it to smoothly go to the 5th one :) – Joel Smith Apr 13 '22 at 07:40
Hi! To add smoothness you can use element.scrollTo(options) with behavior: "smooth" Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo – true_k Apr 13 '22 at 07:42
@true_k we can also use `scroll-behavior: smooth;` in css – Joel Smith Apr 13 '22 at 07:43
I updated my answer for both cases @JoelSmith – Nick Vu Apr 13 '22 at 07:55
there is a problem, as we are doing it based on the height of the obj[0] and then multiply it by 5, what happen if we have the obj[0] height more than the height of the 5th one, then it will multiply the bigger height by 5 and it will not gonna stop at 5. but more than 5 – Joel Smith Apr 13 '22 at 08:34
then you can use `scrollIntoView` like `objDiv[4].scrollIntoView();` @JoelSmith – Nick Vu Apr 13 '22 at 08:39
https://jsfiddle.net/xmurodz0/1/, when we keep clicking on the button it will progress to the next div, but at some point when it reaches the last div and when we click on the button it console log :- `Uncaught TypeError: Cannot read properties of undefined (reading 'scrollIntoView')` – Joel Smith Apr 13 '22 at 10:22
Add this to check your element is existing or not `if(!objDiv[myvalue]) {return}` before calling `scrollIntoView` @JoelSmith – Nick Vu Apr 13 '22 at 10:35
@NickVu, once it reaches the last nothing happens and the overall scrolls stops, we can't scroll with the button anymore, does getting checking whether the scroll reaches the last and then stopping it? something like this? what would you do? – Joel Smith Apr 13 '22 at 10:46
yes it is, if you reach the bottom, it won't scroll any further. If you want to scroll backwards, you can set `myvalue - 1` – Nick Vu Apr 13 '22 at 10:48

How to scroll to the bottom of the selected div?

2 Answers2

Test