链接到另一个页面，执行功能，然后跳转到锚点

Question

I have two pages. The first has a slideshow that allows me to add links for each slide. The second page has numerous expanding div's that are expandable/collapsible onclick using this show/hide function:

 function showtxt(divID) {
   var item = document.getElementById(divID);
   if (item) {
     item.className=(item.className=='hidetxt')?'showtxt':'hidetxt';
   }
 }

Then each expanding/collapsing div on that page has its own function to call it when clicked:

function ANCHORbutton() { 
  var img = document.getElementById('expANCHORbutton').src;
  if (img.indexOf('plus.png')!=-1) { 
    document.getElementById('expANCHORbutton').src  = 'minus.png'; 
  }
  else { 
    document.getElementById('expANCHORbutton').src = 'plus.png'; 
  } 
}

What I'd like to do, if possible, is link each slide from that slideshow to the second page, expand the corresponding div, and then jump down the page to the specified anchor.

If I didn't have everything collapsed, it'd be a simple href="http://domain.com/page2.html#ANCHOR" , but I'm struggling with how to expand the appropriate section before jumping to my anchor.

Answer 1

Problem 1: Collapsed divs all show so no need for browser to scroll
Problem 2: Hidden divs are not being scrolled to since they are hidden.

Solution could be this at the bottom of the page (onload does not trigger on reload on some browsers)

<script>
var hash = location.hash;
if (hash) {
  var divID = hash.substring(1); // remove the #
  showtxt(divID);
  document.getElementById(divID).scrollIntoView();
}
</script>
</body>

Update to add 100px:

var hash = location.hash;
if (hash) {
  var divID = hash.substring(1); // remove the #
  showtxt(divID);
  var div = document.getElementById(divID); 
  div.scrollIntoView(); 
  div.style.top=(parseInt(div.style.top,10)+100)+"px"; 
}