It is relatively simple to dynamically create a dropdown from which you can jump to different parts of a page using JavaScript and ATG DSPEL.
First create the dropdown.
<form name="jumpTo" action=".">
<dspel:droplet name="/atg/dynamo/droplet/ForEach">
<dspel:param name="array" param="categories"/>
<dspel:setvalue param="category" paramvalue="element"/>
<dspel:oparam name="outputStart">
<select name="names">
</dspel:oparam>
<dspel:oparam name="output">
<dspel:getvalueof id="index" param="index"/>
<c:set var="catShortName" value="cat${index}"/>
<option value="<c:out value="${catShortName}"/>">
<dspel:valueof param="category.name"/>
</option>
</dspel:oparam>
<dspel:oparam name="outputEnd">
</select>
</dspel:oparam>
</dspel:droplet>
</form>
Next create the button outside of the form for jumping to different parts of the page. I learned about the window.location.hash from this article. And I learned about how to access the selected value from the dropdown from this article.
<input type="image" src="/img/buttons/update.gif"
onClick="window.location.hash=
document.jumpTo.names.options[document.jumpTo.names.selectedIndex].value">
Finally you create the name anchors throughout your document.
<dspel:droplet name="/atg/dynamo/droplet/ForEach">
<dspel:param name="array" param="categories"/>
<dspel:setvalue param="category" paramvalue="element"/>
<dspel:oparam name="output">
<%-- magazine category --%>
<dspel:getvalueof id="index" param="index"/>
<c:set var="catShortName" value="cat${index}"/>
<a name="<c:out value="${catShortName}"/>"
id="<c:out value="${catShortName}"/>">
<dspel:valueof param="category.name"/>
</a>
</dspel:oparam>
</dspel:droplet>
