Font size:

Apache Forrest Notes

Navigation: Links to the Top of the Page

This site includes some HTML pages which span several screens in height. On such a page once scrolled to the bottom the menu is off the screeen and there is no other way back than to scroll up again. In order to make it easier to reach the menu from anywhere in the page a navigation link to the top of the page is introduced.

1. Add Navigation Icon

The navigation link is realized as small GIF icon (up.gif). As an addition to the pelt skin the icon is placed in
{FORREST_HOME}\main\webapp\skins\pelt\images\ .

2. Add Link to Headings

The links to the top of the page are integrated into the level 2 and level 3 headings. This is achieved by modifications to
{FORREST_HOME}\main\webapp\skins\pelt\xslt\html\site2xhtml.xsl :

First an anchor <a name="top"/> is inserted directly under the opening <body> tag.

Second the code to generate the headings has to be adapted. The modified lines are marked in red in the listing below.

...
<!--headings-->
<xsl:template match="div[@class = 'skinconf-heading-1']">
    <xsl:choose>
      <xsl:when test="//skinconfig/headings/@type='underlined'">
      	<h2 class="underlined_10"><xsl:value-of select="h1"/></h2>
      </xsl:when>
      <xsl:when test="//skinconfig/headings/@type='boxed'">
	       <h2 class="boxed"><xsl:value-of select="h1"/></h2>
      </xsl:when>
      <xsl:otherwise>
	      <h2 class="h3"><a href="#top" onClick="window.scrollTo(0,0);return false;">
                  <img src="{$skin-img-dir}/up.gif" /></a> <xsl:value-of select="h1"/></h2>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

  <xsl:template match="div[@class = 'skinconf-heading-2']">
    <xsl:choose>
      <xsl:when test="//skinconfig/headings/@type='underlined'">
        <h3 class="underlined_5"><xsl:value-of select="h2"/></h3>
      </xsl:when>
      <xsl:when test="//skinconfig/headings/@type='boxed'">
       	<h3 class="boxed"><xsl:value-of select="h2"/></h3>
      </xsl:when>
      <xsl:otherwise>
	      <h3 class="h4"><a href="#top" onClick="window.scrollTo(0,0);return false;">
                  <img src="{$skin-img-dir}/up.gif" /></a> <xsl:value-of select="h2"/></h3>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
...

Explanation

1. The code changes only affect headings when the clean heading style is chosen in skinconf.xml.

2. The additional JavaScript code (onClick="...) allows for a jump to the very top of the page; without it the anchor seems to be a few pixels below the top.