Сложность прокрутки заключается в том, что вам может понадобиться не только прокрутить страницу, чтобы показать элемент div, но вам также может понадобиться прокрутить прокручиваемые элементы div на любом количестве уровней.
Свойство scrollTop доступно для любого элемента DOM, включая тело документа. Установив его, вы можете контролировать, как далеко вниз прокручивается что-то. Вы также можете использовать свойства clientHeight и scrollHeight, чтобы увидеть, сколько прокрутки необходимо (прокрутка возможна, когда clientHeight (viewport) меньше scrollHeight (высота содержимого).
Вы также можете использовать свойство offsetTop, чтобы выяснить, где в контейнере расположен элемент.
Чтобы построить действительно универсальную процедуру «прокрутки в поле зрения» с нуля, вам нужно начать с узла, который вы хотите показать, убедиться, что он находится в видимой части своего родителя, затем повторить то же самое для родителя и т. д. до самого верха.
Один шаг этого будет выглядеть примерно так (непроверенный код, не проверяя крайние случаи):
function scrollIntoView(node) {
var parent = node.parent;
var parentCHeight = parent.clientHeight;
var parentSHeight = parent.scrollHeight;
if (parentSHeight > parentCHeight) {
var nodeHeight = node.clientHeight;
var nodeOffset = node.offsetTop;
var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
parent.scrollTop = scrollOffset;
}
if (parent.parent) {
scrollIntoView(parent);
}
}