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

javascript anchor hashtag
user323094 picture user323094 · Sep 22, 2011 · Viewed 11.3k times · Source

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.

Answer

Ariel picture Ariel · Sep 22, 2011 
$('.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.

Related questions

How to handle anchor hash linking in AngularJS

Do any of you know how to nicely handle anchor hash linking in AngularJS? I have the following markup for a simple FAQ-page <a href="#faq-1">Question 1</a> <a href="#faq-2">Question 2</a&…

Read More
Smooth scrolling when clicking an anchor link

I have a couple of hyperlinks on my page. A FAQ that users will read when they visit my help section. Using Anchor links, I can make the page scroll towards the anchor and guide the users there. Is there …

Read More
How can you check for a #hash in a URL using JavaScript?

I have some jQuery/JavaScript code that I want to run only when there is a hash (#) anchor link in a URL. How can you check for this character using JavaScript? I need a simple catch-all test that would detect …

Read More