#javascript #html #scroll #onload
Вопрос:
На моей веб-странице у меня переполненный div (т. Е. с вертикальной полосой прокрутки). Внутри div у меня есть якоря с идентификаторами. Когда я помещаю один из этих идентификаторов в URL-адрес (mypage.html#id), я хочу, чтобы div, а не страница, прокручивалась до этого якоря.
Как мне это сделать, предпочтительно с помощью простого JavaScript? Если это слишком сложно, я воспользуюсь jQuery, но я не использую его в этом проекте ни для чего другого.
Комментарии:
1. Так что все 3 из этих ответов работают, спасибо. Мне все еще нужно провести кроссбраузерное тестирование, но пока я выбрал .focus()
2. Таким образом, тестирование в нескольких браузерах показало, что работает только .scrollTop ().
Ответ №1:
$('.overflow').scrollTop($('#anchor').offset().top);
Нет никаких причин, по которым вы не можете преобразовать это в стандартный javascript.
Обратите внимание, что прокрутка будет отключена, если на элементе привязки есть поле.
Комментарии:
1. Мне пришлось немного реорганизовать свой HTML и CSS, но это работает (с .position(), а не .offset()). Я посмотрел на источник jQuery, и вырвать эти методы может быть немного сложно. Я постараюсь опубликовать чистый javascript, если мне это удастся.
2. В jQuery слишком много взаимозависимостей, чтобы вырывать это. Какого черта, я соглашусь с этим решением — я только что понял, что для следующей функции я все равно буду использовать jQuery. Спасибо за ответ.
3. На самом деле, я выберу более простое решение с помощью focus(), просто протестировал его.
4. Я не ожидал, что вы на самом деле перепишете jQuery. Те свойства, которые я использовал, являются стандартными для javascript. Просто найдите, как изменить и прочитать смещение и положение, и сделайте это напрямую. (Иногда у них разные имена в разных браузерах.)
5. Это очень плохое решение, которое работает только тогда, когда выполняется множество дополнительных предположений. Поля, отступы, элементы с положением: относительное в иерархии «родитель-потомок» между привязкой и div — большинство комбинаций из них нарушат этот метод. Единственный надежный способ -вычислить абсолютное вертикальное положение div и якоря в документе и установить значение scrollTop для их разницы. Надежно вычислять абсолютные позиции документов фантастически сложно . Плагины, которые обрабатывают это, как правило, проверяют ДЕСЯТКИ особых случаев для КАЖДОЙ пары родитель-потомок по пути от <html> к элементу.
Ответ №2:
Вы пробовали встать focus() на якорь?
Любой элемент DOM с tabindex можно сфокусировать, и любой элемент, имеющий фокус, будет прокручиваться в поле зрения браузера.
Ответ №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;
Ответ №4:
Для тех из вас, кто работает практически в любом крупном браузере в 2021 году, используйте element.scrollIntoView() .
https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView
Метод scrollIntoView() интерфейса элемента прокручивает родительский контейнер элемента таким образом, чтобы элемент, на котором вызывается scrollIntoView (), был виден пользователю — MDN Web Docs
Пример:
var myEl = document.getElementById("child");
myEl.scrollIntoView()
или с параметрами-Не поддерживается в Safari или Internet Explorer:
myEl.scrollIntoView({
block: "center" // Start, center, end, or nearest. Defaults to start.
behavior: "smooth"
})