Creating Links to Layers

[siran]

Back to the brute force method.
Here is an example that does only require you to

1. put some code to the page or website
2.a) add a name (htmlclass=scrollOnOpen) to the button that opens the pop-up layer
2.b) or a different name (htmlclass=scrollToElement) to the object on the pop-up layer that should be scrolled to

2.a) always scrolls to the topmost object.
With 2.b) you can define where to scroll to.
2.b) implicitly modifies all buttons that link to the specific pop-up layer.
If some of the code is removed the behavior of 2.b) can be changed to become a simple marker (see description in the example file).

This is the code:

<script>
function forEachElem(l,f){if(f)for(var i=0;i<l.length;i++)f(l[i]);return l;}
function allElemOfClass(c,f,b){return forEachElem((b||document).getElementsByClassName(c),f);}
function allElemOfSelector(s,f,b){return forEachElem((b||document).querySelectorAll(s),f);}
function calcTop(e){
 var eTop=e.offsetTop;
 if(e.tagName=="DIV"||e.tagName=="A"){
  var t=9999999999,c=e.firstElementChild;
  while(c){t=Math.min(calcTop(c),t);c=c.nextElementSibling;}eTop+=t;
 }
 return eTop;
}

var scrollToPos,intLayerNum;
function pScrollTo(){
 var d=Math.min(Math.max(scrollToPos-16,0),Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)-innerHeight)-pageYOffset,a=Math.abs(d);
 if(a>=1){
  scrollBy(0,Math.min(Math.max(a/8,1),30)*(d<0?-1:1));
  setTimeout(pScrollTo,10);
 }
}

function scrollLayer(){
 var l=document.getElementById("xr_xp"+intLayerNum);
 if(l.style.display=='none')setTimeout(scrollLayer,100);else{
  var e=allElemOfClass("scrollToElement",null,l)[0];
  if(e){
   scrollToPos=e.offsetTop;
   while(e=e.offsetParent)scrollToPos+=e.offsetTop;
  }else{
   scrollToPos=calcTop(l)+l.offsetTop;
   while(l=l.offsetParent)scrollToPos+=l.offsetTop;
  }
  setTimeout(pScrollTo,0);
 }
}

function openAndScroll(n){
 xr_cpu(intLayerNum=n);
 setTimeout(scrollLayer,0);
}

addEventListener("load", function(){
 function setHref(e,n){e.href="javascript:openAndScroll('"+n+"')";}
 var identString="javascript:xr_cpu(";
 allElemOfClass("scrollToElement",function(e){
  var l=e.parentNode;while(l&&l.id.indexOf("xr_xp")!==0)l=l.parentNode;
  if(l){var n=l.id.substr(5);allElemOfSelector('a[href="'+identString+n+')"]',function(e){setHref(e,n);});}
 });
 allElemOfClass("scrollOnOpen",function(e){
  var a=e.parentNode;
  if(a.href.indexOf(identString)===0)setHref(a,parseInt(a.href.substr(18)));
 });
});
</script>