Creating Links to Layers

[Acorn]

And once again I forgot to remove the logging.
Also the code was incorrect and inflexible.
Please use the updated:

<script>
function openAndScroll(sid){
 var e=document.getElementById(sid);
 if(e){
  var p=e.parentNode;
  while(p&&p.id.indexOf("xr_xp")!=0)p=p.parentNode;
  if(p){
   xr_cpu(parseInt(p.id.substr(5)));
   setTimeout(function(){$('html,body').animate({scrollTop:$(e).offset().top-25},'slow');},100);
  }
 }
}
</script>

As mentioned above, the main part is taken from Acorn's example.
How it works:

1. The code at the head creates a function called openAndScroll. (see above)
2. The object on the pop-up layer has the name 'magic' applied. (This lets Xara give the created HTML element that ID. Any simple name would be allowed.)
3. The button is linked to

javascript:openAndScroll('magic');

which calls the function passing the parameter 'magic'.
4. The button has the name 'UsesJQuery' applied to tell Xara to include the JQuery javascript library.
5. There is a rectangle below the button that forces the pop-up layer to be exported.

When the button is clicked the function tries to find the HTML element with the given ID.
If found it tries to identify the internal number of the pop-up layer.
If found it calls the Xara internal function to open the pop-up layer and calls Acorns code a little delayed.

siran, I am grateful you took the time to develop my puny first stab.
In reading through your coding, I then had an insight that helped me develop a quite flexible approach for multiple buttons on multiple layers.

So the details are as follows:


Create a number of layers.
Add Shapes across the Layers.
Ensure something on the page has a Name of UsesJQuery.
Give each topmost Shape a Name: here I've used - tom, dick harriet


Create Shapes on the MouseOff Layer that each Link to a new Layers (standard Xara).
Give each of these a Name. Here I chose: jumpToTom, jumpToDick & jumpToHarriet.
Ultimately these need to be hidden but kept.


Create more shapes on the MouseOff layer, which can be rollover buttons, images, etc.
Set its Link to javascript: openAndScroll(objectName, invokingButtonName), here, each is:
javascript: openAndScroll('tom','jumpToTom');
javascript: openAndScroll('dick','jumpToDick');
javascript: openAndScroll('harriet','jumpToHarriet');


In the Page HTML code (head), include this:

<script>
function openAndScroll(sid,lid) {
  eval($('#' + lid).parent().attr('href'));
  //console.log($('#' + lid).parent().attr('href'));
  $('html,body').animate({scrollTop:$('#' + sid).offset().top-25},'slow');
}
</script>

My example: Scroll To Named Objects in Layers.web

The invoking Button setting need to be kept at Instant.
If you change it, you would have to change the offset value to a larger value, say 250 px.

Acorn