Links to Tabbed Areas

So just to be clear in case anyone gets to this, if I use a link to a tabbed area such as:
http://banetti.staging.wpengine.com/portfolio/highered-ucsd/#tab-id-2 (hosted on WPengine)

It goes to the center or bottom of the boxed tab area, instead of the top. I’d like it to go place the tab title at top of browser window, or at least put it somewhere so my user doesn’t then have to scroll back up to see the beginning of the content.

I have tried setting an anchor target inside the tabbed content, and setting a link up for it, but while that does set the page in the correct place, it doesn’t open the correct tab.

I have been seeking a solution to this for quite a while and tried plugins as well. Any help would be much appreciated.

I ended up solving this problem with a plugin plus a custom script, custom php, and custom css.
The plugin author did the heavy lifting here, so while I have his permission to share the customizations, if you use this workaround please thank him.

The plugin I used was “Page Scroll to id.”
In the plugins settings, under “offset,” add “#header:fixed”.
Also where you see “scroll to location hash,” unclick the Enable button.

Then you will want to do the following three customizations:
In Child Theme functions.php:

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

if(!function_exists('child_theme_frontend_scripts'))
{
	
	if(!is_admin()){
		add_action('wp_enqueue_scripts', 'child_theme_frontend_scripts');
	}
	
	function child_theme_frontend_scripts()
	{
		$child_theme_url = get_stylesheet_directory_uri();
		wp_enqueue_script( 'custom-script',  $child_theme_url.'/js/custom-script.js', array('jquery'), 1, true);
	}
	
}

In Child Theme’s custom.css, add the following: (You may need to alter the colors for your own instance.)

.main_color .sidebar .current-menu-item>a._mPS2id-h{
color: #919191;
font-weight: normal;
}

.main_color .sidebar .current-menu-item>a._mPS2id-h:hover{
color: #8bba34;
}

.main_color .sidebar .current-menu-item>a._mPS2id-h.mPS2id-clicked{
color: #222222;
font-weight: bold;
}

.av-main-nav .current-menu-item > a > .avia-menu-fx{
opacity: 0;
}

.header_color .main_menu ul:first-child > li.current-menu-item > a,
#top .header_color .main_menu .menu .avia_mega_div ul .current-menu-item > a{
color: #919191;
}

.av-main-nav .active-parent-item > a > .avia-menu-fx, .av-main-nav .current-page-parent > a > .avia-menu-fx, .av-main-nav .current_page_parent > a > .avia-menu-fx,
.av-main-nav .active-parent-item.current-menu-item > a > .avia-menu-fx, .av-main-nav .current-page-parent.current-menu-item > a > .avia-menu-fx,
.av-main-nav .current_page_parent.current-menu-item > a > .avia-menu-fx,
.av-main-nav .current_page_item > a > .avia-menu-fx{
opacity: 1;
visibility: visible;
}

.header_color .main_menu ul:first-child > li.current-page-parent > a, .header_color .main_menu ul:first-child > li.current_page_parent > a,
.header_color .main_menu ul:first-child > li.current_page_item > a,
.header_color .main_menu ul:first-child > li.current-menu-item > a:hover{
color: #666;
}

<strong>Create a new file named custom-script.js and put it in a folder named "js" in the Child Theme folder.</strong>

/* opens the associated tab of page scroll to id target elements */
(function ($) {
$(window).load(function(){
/* scroll to tabs when page loads if necessary */
var loc=window.location,tabs=$(“.tab_titles”);
if(loc.hash.indexOf(“tab-id-“)!=-1 && tabs.length){
var activeTab=$(“.active_tab”),activeTabID=activeTab.attr(“data-fake-id”),activeTabMenuItem=$(“a[rel=’m_PageScroll2id’][href*='”+activeTabID+”‘]”),delay=500;
setTimeout(function(){ $.mPageScroll2id(“scrollTo”,activeTabID+”-container”,{clicked:activeTabMenuItem,offset:_offset()}); },delay);
}
/* click event to open target tab */
$(“a[rel=’m_PageScroll2id’]”).on(“click.mPS2idTab”,function(e){
var el=$(this),href=el.attr(“href”),targetID=href.split(“#”)[1],target=$(“#”+targetID),tabClass=”tab_content”,parentTab=target.parents(“.”+tabClass),
targetTab=parentTab.length ? parentTab : target.hasClass(tabClass) ? target : null,
locHash=loc.toString().split(“#”)[0],hrefBase=href.split(“#”)[0];
if(hrefBase===locHash){ //same page links: scroll to and open tab
if(targetTab){
var tabID=targetTab.attr(“id”).replace(“-container”,””),tabLink=$(“div[data-fake-id=’#”+tabID+”‘]”);
el.attr(“data-ps2id-offset”,_offset());
tabLink.trigger(“click”);
}
}else{ //different page links: go to original theme url
el.attr(“href”,href.replace(“-container”,””));
}
});
function _offset(){
var origOffset=$(document).data(“mPS2id”).offset,offsetVal=$(origOffset).length ? $(origOffset).height() : origOffset;
return offsetVal+tabs.outerHeight()+$(“#wpadminbar”).height(); //set to return offsetVal; to remove extra offset
}
});
})(jQuery);
`

To add menu items,
Add urls that identify page, tab id, and add -container at the end. Example: “http://yourwebsite.com/page/#tab-id-2-container”
Add “m_PageScroll2id” to the link Relationship (XFN) for each. If this box doesn’t appear you can turn it on under “screen options.”

I’m hoping the issues with targeting links inside tabbed or boxed areas is something that will be fixed in a future update of the theme, but for now, this works for us. I hope it helps others.