Liens hypertexts foireux

http://monsite.com/

	=> (clic sur l’ancre)

http://monsite.com/#ancre

	=> (précédent)

http://monsite.com/ 

http://monsite.com/#top

	=> (clic sur l’ancre)

http://monsite.com/#ancre

	=> (précédent)

http://monsite.com/#top 

<a href="#renvoi1" id="mot1">la première ancre</a>[...]
<a href="#renvoi2" id="mot2">la deuxième ancre</a>
[...]
<a href="#mot1" id="renvoi1">renvoi 1</a>
<a href="#mot2" id="renvoi2">renvoi 12</a>

<a id="lien1" href="ancre1" onclick="displayBackLink(this)">aller à la cible 1</a>

[…]blablabla <span id="ancre1">la cible 1</span> blablabla[…]

function displayBackLink(link)
{
	removeBackLink(); /* à mettre en commentaire pour les 1ers tests */
	var backP = document.createElement("p");
	backP.setAttribute('id', 'backLink');
	backP = document.body.appendChild(backP);
	var backLink = document.createElement("a");
	backLink.setAttribute('href', '#'+link.getAttribute('id'));
	backLink.setAttribute('onclick', 'removeBackLink();');
	var linkText = document.createTextNode('retour vers '+link.getAttribute('id'));
	linkText = backLink.appendChild(linkText);
	backLink = backP.appendChild(backLink);
}
function removeBackLink()
{
	document.body.removeChild(document.getElementById('backLink'));
}

p#backLink{
position:absolute;
top:10px;
right:10px;
}

// variable globale scroll
myScroll = 0;

anchorPart = function(s) {
	/*
		pour les URL : récupère la partie ancre de l'URL
		(après le dièse, inclus)
	*/
	return s.substring(s.indexOf('#'));
} // anchorPart

function myListener(o, e, f) { // objet, event, function
	/*
		gestionnaire d'évènement adapté à tous les navigateurs
	*/
	if (o.addEventListener)
		o.addEventListener(e, f, false) // version standard
	else
		o.attachEvent('on' + e, f) // version IE
} // myListener

function scrollBack(e) {
	/*
		renvoie à l'ancien scroll mémorisé et empêche
		le navigateur de suivre normalement le lien.
		Il est nécessaire de laisser un href au lien,
		pour que l'utilisateur voie qu'il s'agit d'un lien,
		et pour que ça marche aussi si JavaScript est désactivé.
	*/
	if (e.preventDefault)
		e.preventDefault(); // méthode standard
	e.returnValue = false; // méthode IE
	scrollTo(0, myScroll);
} // scrollBack


// on attache les fonctions lorsque toute la page est chargée :
myListener(window, 'load', function() {
	// attachement d'une fonction de mémorisation sur les liens
	var liens = document.getElementsByTagName('a');
	for (var i = 0; i < liens.length; i++) {
		var a = liens.item(i);
		if ('#ancre' == anchorPart(a.href)) {
			myListener(a, 'click', function() {
				myScroll = window.pageYOffset
					|| document.documentElement.scrollTop
			});
		}
	}
	
	// attachement de scrollBack sur le lien de retour
	var retour = document.getElementById('retour');
	myListener(retour, 'click', scrollBack);
});

function myListener(o, e, f) {
	if (o.addEventListener)
		o.addEventListener(e, f, false)
	else
		o.attachEvent('on' + e, f);
} // myListener

BackLink = {
	
	p: document.createElement('p'),
	a: document.createElement('a'),
	text: document.createTextNode(''),
	
	create: function(e) {
		with (BackLink) {
			p.id = 'backLink';
			myListener(a, 'click', remove);
			a.appendChild(text);
			p.appendChild(a);
		}
	}, // BackLink.create
	
	display: function(e) {
		var link = e.target || e.srcElement;
		with (BackLink) {
			a.href = '#' + link.id;
			text.data = 'retour vers ' + link.id;
			document.body.appendChild(p);
		}
	}, // BackLink.display
	
	remove: function(e) {
		document.body.removeChild(BackLink.p);
	} // BackLink.remove
	
} // namespace BackLink

function listenToAllLinks() {
	var links = document.getElementsByTagName('a');
	for (var i = 0; i < links.length; i++) {
		var link = links.item(i);
		if ('#ancre1' == link.href.substring(link.href.indexOf('#'))) {
			link.id = 'lien' + i;
			myListener(link, 'click', BackLink.display);
		}
	}
} // listenToAllLinks

/************ initialisation de la page ***************/
myListener(window, 'load', function() {
	listenToAllLinks();
	BackLink.create();
});