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.