I have seen examples of how to navigate to a new page to scroll to an ID that is visible and within the same page scroll to an ID that is hidden (i.e., enable it, then scroll to it), however, I am having much difficulty combining these two ideas.
The scenario is that a click on a menu item will open a new page. The new page has “tabbed” content, where all but the first pane is hidden. The menu might be a link to the ID of one of the hidden divs (secondary) tabs.
This code that I found here on Stack, works well to open the new page and scroll to the visible ID, but any modifications I’ve tried on it to unhide any hidden divs and scroll to those, seems to not work.
$(‘a[href*=#]’).on(‘click’,function(e) {
var target = this.hash;
var $target = $(target);
console.log(targetname);
var targetname = target.slice(1, target.length);
if(document.getElementById(targetname) != null) {
e.preventDefault();
}
$('html, body').stop().animate({
'scrollTop': $target.offset().top-120 //or the height of your fixed navigation
}, 900, 'swing', function () {
window.location.hash = target;
/* I've tried inserting code here to run after the new page is loaded to no avail. */
});
});
Debra Elliott is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.