I am trying to link to specific tabs externally. With the script I am using no matter which tab anchor is in the url it always goes to tab 1 when I use Google Analytics tagging in the url it only goes to tab one even though my script tells it to ignore everything after the parameter. I am linking to tabs using the following url - http://www.mysite.com/myshorturl#tabs-6?utm_source=campaign_detail&utm_medium=email&utm_campaign=my_campaign
I need it to ignore the parameter and everything after it and link to the correct tab. The scripts work as expected when not using GA tagging:
HTML:
<div id="tabs">
<ul id="tab-ul">
<li class="class1"><a class="scroll" id="tab-1" href="#tabs-1"></a></li>
<li class="class2"><a class="scroll" id="tab-2" href="#tabs-2"></a></li>
<li class="class3"><a class="scroll" id="tab-3" href="#tabs-3"></a></li>
<li class="class4"><a class="scroll" id="tab-4" href="#tabs-4"></a></li>
<li class="class5"><a class="scroll" id="tab-5" href="#tabs-5"></a></li>
<li class="class6"><a class="scroll" id="tab-6" href="#tabs-6"></a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
<div id="tabs-5"></div>
<div id="tabs-6"></div>
JQUERY:
$(function () {
// run the jquery ui plugin
$('#tabs').tabs();
$("#tabs").tabs({
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
});
$(window).bind("load", function () {
var CleanURL = window.location.href.split("?")[1];
var urlHash = CleanURL.split("#")[1];
$('html,body').animate({
scrollTop: $('a[href="#' + urlHash + '"]').offset().top -40}, 300);
});
The issue is because the URL fragment, the # value, should come at the end of the URL, after the querystring: