Using Anchors to Navigate Through a Page : Anchor « HTML « JavaScript DHTML






  1. JavaScript DHTML
  2. HTML
  3. Anchor

Using Anchors to Navigate Through a Page

   

<html> 

<head> 
<title>document.anchors Property</title> 
<script type="text/javascript"> 
function goNextAnchor(where) { 
    window.location.hash = where; 
} 
function addEvent(elem, evtType, func) { 
    if (elem.addEventListener) { 
        elem.addEventListener(evtType, func, false); 
    } else if (elem.attachEvent) { 
        elem.attachEvent("on" + evtType, func); 
    } else { 
        elem["on" + evtType] = func; 
    } 
} 
addEvent(window, "load", function() { 
    addEvent(document.getElementById("next1"), "click", function(evt) {goNextAnchor("sec1")}); 
    addEvent(document.getElementById("next4"), "click", function(evt) {goNextAnchor("start")}); 
}); 
</script> 
</head> 
<body> 
<a id="start" name="start">Top</a>
<form> 
    <input type="button" id="next1" name="next" value="NEXT" /> 
</form> 
<a id="sec1" name="sec1">Section 1</a>
<form> 
    <input type="button" id="next4" name="next" value="BACK TO TOP" /> 
</form> 
</body> 
</html>








Related examples in the same category

1.Anchor 'target' Example
2. A Document with Anchors
3.Reading the Number of Anchors
4.Properties of the Anchor Object
5.Anchors array
6.Return the number of anchors in a document
7.List anchor in a document
8.Anchor on mouse over event
9.Anchor on click event
10.on mouse over action for anchor link
11.Create a hyper link element and set the id and href attributes
12.Presenting Different Content for Scriptable and Nonscriptable Browsers
13.Links with Custom Status-Bar Messages
14.Create anchor tag and output
15.String.link()