(Javascript) Open a tab, make tab active, scroll to anchor

Question

[Edit] Unlike some other questions on Stackoverflow, I am not looking just to scroll to an anchor. I need the page to scroll to the tabs, open and make the tab active, and then scroll the rest of the way to the anchor.

I am looking for some help with some code, but it is a bit hard to explain. I am rather new to Javascript and will provide as much detail as I can.

I have some regular tabs, each with some content within them. One of the tabs is a table of product comparisons. Above the tabs on the same page, I have an a href linked to an anchor. What I am trying to achieve is, through Javascript, if a user clicks the external link, it will:

Scroll to the tabs section of the website
Click the "Compare Configurations"tab that has the table (this will have the anchor on it.)
Scroll to the anchor within that tab.

An example of what I am trying to achieve is similar to the GoPro website: EXAMPLE

When you click on the "Compare Editions" (below the PayPal part), it scrolls the page to the correct tab, opens it, and displays the table. That is what I am trying to achieve.

So far, I have the following code for my tabs:

<ul id="tabs">
    <li class="active">FEATURES</li>
    <li>SPECIFICATIONS</li>
   <li>COMPARE CONFIGURATIONS</li>
</ul>

<ul id="tab">
    <li class="active">
        This is the first tab.
    </li>
    <li>
        <br>
        This is the second tab.
    </li>
    <li>
        <br>
        This is the third tab.
    </li>
</ul>

Is there any way to get what I am trying to achieve with Javascript or the like? I am open to any and all suggestions and appreciate any help with this. If you would like to see my page and see how the page is laid out with the tabs, feel free to visit my site.

possible duplicate of [How do I scroll to an element using JavaScript?](http://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript) — Alexei Levenkov, Sep 22 '15 at 14:46
@AlexeiLevenkov Close, but not exactly. I need it to scroll, yes, but I also need the tab to be marked as active and for the external link to scroll to the anchor. — FlexMarket, Sep 22 '15 at 15:42
@FlexMarket you can't decide which tab will be "active"... the rest (use #elementId as part of link Url to automatically scroll to element) shown in post I've linked, as well as comment here. You should argue that it is HTML-only solution and thus is not duplicate. — Alexei Levenkov, Sep 22 '15 at 15:57

score 0 · Answer 1 · answered Sep 22 '15 at 14:53

You can simply toggle the 'active' class using addClass removeClass using jQuery like this:

<ul id="tab">
<li >
    This is the first tab.
</li>
<li class="active">
    <br>
    This is the second tab.
</li>
  <li>
    <br>
     This is the third tab.
</li>

(I think only .active will visible at a time.)

And after that you can scroll to that element:

$('html,body').animate({
    scrollTop: $("#tab").offset().top
  }, 1000)

NOTE: you need Jquery for this.

(Javascript) Open a tab, make tab active, scroll to anchor

1 Answers1