How do I scroll to a certain element within a div?

Problem

I have a scrolled div and I’d want to have an event that forces this div to scroll to display an element within when I click on it. This is how I wrote its JavasSript:

document.getElementById(chr).scrollIntoView(true);

but this scrolls all the page while scrolling the div itself. What can be done about it?

I’d like to put it this way: MyContainerDiv.getElementById(chr). scrollIntoView(true);

Asked by Amr Elgarhy

Solution #1

The top offset of the element you want to scroll into view, relative to its parent (the scrolling div container), must be obtained:

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

The distance between the top of the scrolling div and the element you want to see is now set in the variable topPos (in pixels).

Now we use scrollTop: to tell the div to scroll to that place.

document.getElementById('scrolling_div').scrollTop = topPos;

You’d perform the same thing if you were using the prototype JS framework:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

This will once again scroll the div such that the element you want to see is at the very top (or, if that’s not possible, as far down as it can go to make it visible).

Answered by Brian Barrett

Solution #2

You’d have to locate the element in the DIV you want to scroll to and set the scrollTop property to that location.

divElem.scrollTop = 0;

Update:

To move up or down, here’s a sample code.

  function move_up() {
    document.getElementById('divElem').scrollTop += 10;
  }

  function move_down() {
    document.getElementById('divElem').scrollTop -= 10;
  }

Answered by Glennular

Solution #3

Answered by vsync

Solution #4

The intended result is achieved by setting ScrollTop, but the scroll is rather abrupt. It was not possible to get smooth scrolling with jquery. So here’s a native solution that works across all major browsers. caniuse as a source

// get the "Div" inside which you wish to scroll (i.e. the container element)
const El = document.getElementById('xyz');

// Lets say you wish to scroll by 100px, 
El.scrollTo({top: 100, behavior: 'smooth'});

// If you wish to scroll until the end of the container
El.scrollTo({top: El.scrollHeight, behavior: 'smooth'});

That’s it!

For the sceptics, here’s a functional snippet –

Update: As you can see from the comments, Element.scrollTo() does not appear to work with Internet Explorer 11. So, if you don’t care about Internet Explorer 11 (which you should), feel free to utilize this in all your applications. It’s worth noting that Edge is supported! So you’re not completely abandoning your Edge/Windows users;)

Reference

Answered by Niket Pathak

Solution #5

You may use the scrollIfNeeded function to only scroll an element into view of a div if it is required:

Answered by mpen

Post is based on https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div