CODEWITHSUNDEEP
javascripthtmlanchorjs-scrollintoview
A.J
A.J

Reputation: 1180

scrollIntoView is not scrolling into view

I have the following code:

HTML

<a href="#" onclick="document.getElementById('tabAnchor').scrollIntoView(true); return false;">
    TEXT TO GO TO WARRANTY
</a>
...
<!-- A LOT OF HTML -->
...
<a id="tr_tab_2";">Warranty</a>

The issue is that it changes tabs and scrolls a bit, but it doesn't actually scroll to a point where I can see the selected tab. It just goes down to the title of the tab.

Is there a way to scroll it under the tab title instead of just to the title?

SOLUTION

In case anyone stumbles upon it, this fixes it:

<a href="#" onclick="scrollIntoWarranty(); return false;">

function scrollIntoWarranty() {
    var offset = 50;
    var el = document.querySelector("#tr_tab_2");
    window.scroll({ top: (el.offsetTop - offset), left: 0, behavior: 'smooth' });
}

Upvotes: 1

Views: 541

Answers (0)

Related Questions