{"id":693,"date":"2015-10-31T00:13:49","date_gmt":"2015-10-30T23:13:49","guid":{"rendered":"http:\/\/getgui.com\/blog\/?p=693"},"modified":"2020-08-24T09:45:57","modified_gmt":"2020-08-24T07:45:57","slug":"firefox-not-scrolling-to-anchor-links-tags-position-solution","status":"publish","type":"post","link":"https:\/\/getgui.com\/blog\/web-development\/firefox-not-scrolling-to-anchor-links-tags-position-solution\/","title":{"rendered":"Firefox not scrolling to Anchor Links Tags position (Solution)"},"content":{"rendered":"

Go straight to the solution<\/a><\/p>\n

Issue<\/h5>\n

When clicking on an internal link, Firefox doesn’t scroll to the position of the anchored \/ hashtag \/ # element, during the first page load. Instead, it jumps to the middle or to the bottom of the page. If user clicks inside of the address bar and presses Enter, Firefox then scrolls to the correct position. Problem only occurs when link is not on the same page as the anchored element. If both are on the same page, Firefox scrolls to the correct position. Bug is not present in other browsers.<\/p>\n

Example: If you click on link – GetGui DC charging adapter with ammeter<\/a> New tab opens and Firefox should scroll directly to the element with ID “getgui-current-measuring-adapter”. Instead it scrolls to the middle or to the bottom of the page, as seen in the screenshot below.<\/em><\/p>\n

\"firefox-anchor-link-scroll-bug\"<\/a><\/p>\n

Problem occurs because Firefox tries to scroll to the anchored element before the page is even loaded and the element is actually created. Since it can’t locate the anchored element, it scrolls to the middle or to the bottom of the page.<\/p>\n

<\/p>\n

Solution<\/h5>\n

Workaround takes advantage of the Javascript’s window.onload<\/strong> event handler, location.hash<\/strong> property and scrollIntoView<\/strong> method. All three are supported in all the major browsers.<\/p>\n

\nFunction is simple and straightforward, as seen below. <\/p>\n

\r\n...\r\n