SECTION 1

SECTION 2

SECTION 3

TOP

The Javascript links for each button are: javascript:document.getElementById("Top").scrollIntoView ({ behavior: "smooth"}); xr_ppc("xr_xp4"); javascript:document.getElementById("Section1").scrollIntoView ({ behavior: "smooth"}); xr_ppc("xr_xp4"); javascript:document.getElementById("Section2").scrollIntoView ({ behavior: "smooth"}); xr_ppc("xr_xp4"); javascript:document.getElementById("Section3").scrollIntoView ({ behavior: "smooth"}); xr_ppc("xr_xp4"); where each anchor name, in this example refers to the horizontal bar immediately above the heading text - this object could be anything of the designer’s choice. The popup has an internal reference and is closed with code xr_ppc(“xr_xp4”); in the above code text. CSS is added to the website Head HTML to ensure the anchor scrolls to a position below the fixed (sticky) header block: <style> #Top{ scroll-margin-top: 63px; } #Section1 { scroll-margin-top: 63px; } #Section2 { scroll-margin-top: 63px; } #Section3 { scroll-margin-top: 63px; } </style> Shortened to: <style> #Top, [id^="Sect"] { scroll-margin-top: 63px; } </style>
Adipisicing dolore in laboris, adipisicing sit, do ut non ad qui, consectetur eiusmod. Et laboris nostrud, elit in consectetur excepteur commodo non cupidatat consequat sunt. Consequat tempor officia consectetur ea ut, deserunt nulla id esse ut irure amet deserunt. Minim sit amet incididunt pariatur est sunt nostrud aute voluptate sint, ipsum in officia id dolore tempor occaecat?
Adipisicing dolore in laboris, adipisicing sit, do ut non ad qui, consectetur eiusmod. Et laboris nostrud, elit in consectetur excepteur commodo non cupidatat consequat sunt. Consequat tempor officia consectetur ea ut, deserunt nulla id esse ut irure amet deserunt. Minim sit amet incididunt pariatur est sunt nostrud aute voluptate sint, ipsum in officia id dolore tempor occaecat?
The Menu icon links to a popup; in this case named Menu(lock). The extension of “(lock)” ensures that the popup cannot be inadvertently closed by a random click on the page. The Menu bar which resides on the popup layer slides in from the bottom ( this is possible as its components are constructed on the MouseOff layer, animation applied, then cut and pasted to the Menu(lock) layer. A quirk of Xara that prevents animations on a popup. The menu icon when clicked / touched causes the menu layer to slide-in from the bottom and remain visible until a link on the menu icon is clicked / touched. This is a single page where each menu item links to an anchor; it could also be a heading. Section 1 describes the JavaScript links which execute the link itself and close the popup.