I'm using a jQuery tabs plugin that uses anchors so that you can define which tab should be open by default.

But if the interface is below the fold, it doesn't scroll into view. I tried adding an anchor tag above the interface, but I can't get it to highlight the appropriate tab AND scroll into view.

Since I can't use two anchors, my thought was if I wanted to provide a link to scroll into view I could include a parameter in the URL, like this: .html?scrollto=Interface#parentHorizontalTab2 (where "Interface" might be the name of an anchor of id name at the top of the interface)

I googled and searched stackoverflow and couldn't find anything. Is there some sort of script that would allow this to work? Or is there a better way to do this?

Here's a working example: .html

This makes the second tab active: .html#parentHorizontalTab2 (#parentHorizontalTab2 is what makes the second tab open by default)

This scrolls to the tabbed interface: .html#Interface (#Interface is the anchor at the beginning of the interface)

But I can't get both to work at the same time. Any suggestions? Is there a way to do something like: .html?scrollto=Interface#parentHorizontalTab2 where a script picks up on the scrollto parameter and scrolls to it?

Something like (I'm using English since I am not familiar with the code construct):

if scrollto is found in the URL
then scroll to the anchor defined in the scrollto

I'm using a jQuery tabs plugin that uses anchors so that you can define which tab should be open by default.

But if the interface is below the fold, it doesn't scroll into view. I tried adding an anchor tag above the interface, but I can't get it to highlight the appropriate tab AND scroll into view.

Since I can't use two anchors, my thought was if I wanted to provide a link to scroll into view I could include a parameter in the URL, like this: http://stage.ravencreative./scroll/Index.html?scrollto=Interface#parentHorizontalTab2 (where "Interface" might be the name of an anchor of id name at the top of the interface)

I googled and searched stackoverflow and couldn't find anything. Is there some sort of script that would allow this to work? Or is there a better way to do this?

Here's a working example: http://stage.ravencreative./scroll/Index.html

This makes the second tab active: http://stage.ravencreative./scroll/Index.html#parentHorizontalTab2 (#parentHorizontalTab2 is what makes the second tab open by default)

This scrolls to the tabbed interface: http://stage.ravencreative./scroll/Index.html#Interface (#Interface is the anchor at the beginning of the interface)

But I can't get both to work at the same time. Any suggestions? Is there a way to do something like: http://stage.ravencreative./scroll/Index.html?scrollto=Interface#parentHorizontalTab2 where a script picks up on the scrollto parameter and scrolls to it?

Something like (I'm using English since I am not familiar with the code construct):

if scrollto is found in the URL
then scroll to the anchor defined in the scrollto

• javascript
• jquery
• html

• Please attach some code or a few screenshots at the very least. – Jason Sears Commented Jan 29, 2016 at 18:57
• Thanks for the tip, I rewrote the question using only live demo examples. – Rothgarr Commented Jan 29, 2016 at 19:31
• Can you not just use a bit of javascript to pick up the target tab and click() it? example: jQuery("#parentHorizontalTab ul li")[1].click(); – adammtlx Commented Jan 29, 2016 at 19:34
• Sorry, I'm not sure what that means. Sometimes I might only need to have a certain tab selected, but not need to scroll down to the tabs interface like these links: stage.ravencreative./scroll/Index.html#parentHorizontalTab2 or stage.ravencreative./scroll/Index.html#parentHorizontalTab3. But other times I might need to have the URL automatically scroll down to that interface. That's why I was thinking that maybe there's a way to do it by including a parameter in the URL like "?scrollto=Interface" – Rothgarr Commented Jan 29, 2016 at 19:38

2 Answers 2

You can use a variety of #tabConditionSelector conditions as you described, then on document.ready you can read it and scroll / select and anything else on a case-by-case basis.

Using jQuery:

$( window ).load(function() {

    var hash = window.location.hash;

    if (hash == "#parentHorizontalTab2") {
      var top = document.getElementById("Interface").offsetTop; //Getting Y of target element
      window.scrollTo(0, top);

    } else if (hash == "#parentHorizontalTab3") {
      //select tab 3 etc
    }
});

You can use this to scroll to specific location on load from link hash

    $(window).load(function () {

        var hash = window.location.hash;

        $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 'slow');

    });