How do I scroll an overflowed div to a certain hashtag (anchor)?

javascript anchor hashtag

12,543

Solution 1

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

There is no reason at all you can't convert this to standard javascript.

Note that the scroll will be off if there is a margin on the anchor element.

Solution 2

Have you tried to set focus() on the anchor?

Any DOM element with a tabindex is focusable, and any element which has focus will be scrolled into view by the browser.

Solution 3

This is a pure Javascript (ECMA 6) solution, similar to Ariel's answer.

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;

Solution 4

For those of you in nearly any major browser in 2021, use element.scrollIntoView().

https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView

The Element interface's scrollIntoView() method scrolls the element's parent container such that the element on which scrollIntoView() is called is visible to the user - MDN Web Docs

Example:

var myEl = document.getElementById("child");
myEl.scrollIntoView()

or with Parameters -- Not supported in Safari or Internet Explorer:

myEl.scrollIntoView({
    block: "center" // Start, center, end, or nearest. Defaults to start.
    behavior: "smooth"
})

View more solutions

12,543

Author by

user323094

Updated on June 18, 2022

Comments

user323094 almost 2 years

On my webpage I have an overflowed div (i.e. with the vertical scrollbar). Inside the div, I have anchors with ids. When I put one of these ids in the URL (mypage.html#id), I want the div, not the page, to scroll to that anchor.

How do I do that, preferably with plain JavaScript? If it's too complex, I'll go with jQuery, but I'm not using it in this project for anything else.
- user323094 over 12 years
  
  So all 3 of these answers work, thanks. I still have to do cross-browser testing, but for now I went with .focus()
- user323094 over 12 years
  
  So testing in multiple browses has shown that only .scrollTop() works.
user323094 over 12 years

I had to reorganize my HTML and CSS a bit but this works (with .position(), not .offset()). I looked at jQuery source and ripping these methods out might be a bit difficult. I'll try and post pure javascript if I'll succeed.
user323094 over 12 years

There are too many interdependencies in jQuery to rip this out. What the hell, I'll go with this solution - I just realized that for the next feature I'd be using jQuery anyway. Thanks for the answer.
user323094 over 12 years

Actually, I'll go with the simpler solution with focus(), just tested it.
Ariel over 12 years

I was not expecting you to actually rewrite JQuery. Those properties I used are standard javascript ones. Just lookup how to change and read the offset and position, and do it directly. (They have different names sometimes in different browsers.)
Szczepan Hołyszewski about 8 years

This is a very poor solution that works only when a multitude of extra assumptions are met. Margins, paddings, elements with position: relative in the parent-child hierarchy between the anchor and the div - most combinations of these will break this method. The only reliable way is to compute document-absolute vertical positions of the div and the anchor and set scrollTop to their difference. Reliably computing document-absolute positions is fantastically hard. Plugins that handle this tend to check DOZENS of special cases for EACH parent-child pair on path from <html> to the element.