Question

Link to an anchor within tabbed content from an external link Go to anchor. Script needs to be added as a global file across all pages/template. Example of what I have so I have so far.

click on the <a goto="stuff" href="#test">Go to stuff</a> /which goes to the third tab.

jsfiddle

Answer 1

The problem is that $(window.location.hash) evaluates to $(‘#test’) so it looks for an element with an ID=”test”. Such element does not exist on your page.

Using a link like this:

http://www.canberra.edu.au/media/test/bookmark.html/#test

would usually indicate that you want to go to content marked with anchor name=”test”.

In your example I can see at least two anchors with the same name attribute:

<a name="test"></a>

This is wrong – anchor names must be unique:

http://www.w3.org/TR/html401/struct/links.html#idx-anchor-4

So once you fix this and have a unique anchor name, you can then use href instead of your goto attribute.
It’s also a good idea to use both name and id:

<a id="test" name="test"></a>

which will make $(window.location.hash) work as expected.

So now this should activate the correct tab:

var $targetAnchor = $(window.location.hash);
tabId = $targetAnchor.closest('.tab-content').attr('id');
$tabs.find('a[href=#' + tabId + ']').click();

And this should work for scrolling:

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