Как прокрутить переполненный div до определенного хэштега (якоря)?

Question

На моей веб-странице у меня переполнен div (то есть с вертикальной полосой прокрутки).Внутри div у меня есть якоря с идентификаторами.Когда я добавляю один из этих идентификаторов в URL (mypage.html # id), я хочу, чтобы div, а не страница, прокручивал до этой привязки.

Как мне это сделать, желательно с простым JavaScript?Если это слишком сложно, я пойду с jQuery, но я не буду использовать его в этом проекте ни для чего другого.

Answer 1

$('.overflow').scrollTop($('#anchor').offset().top);

Нет никаких причин, по которым вы не можете преобразовать это в стандартный javascript.

Обратите внимание, что прокрутка будет отключена, если на элементе привязки есть поле.

Answer 2

Вы пытались установить focus() на якоре?

Любой элемент DOM с tabindex является фокусируемым, и любой элемент, имеющий фокус, будет прокручиваться в браузере.

Answer 3

Это чисто решение Javascript (ECMA 6), аналогичное ответу Ариэля.

const overflow = document.querySelector('.overflow');
const anchor = document.getElementById('anchor');

// Get the bounding client rectangles for both
// the overflow container and the target anchor
const rectOverflow = overflow.getBoundingClientRect();
const rectAnchor = anchor.getBoundingClientRect();

// Set the scroll position of the overflow container
overflow.scrollTop = rectAnchor.top - rectOverflow.top;