kaxigt.com

Lästid: < 1 minut

Den här artikeln handlar om Javascript och ankare

Inaktivera tillagda ankare i URL som visas i webbläsarens adressfält.

Exempel, om du klickar på en länk som pekar mot #ankarlänk på samma sida så kommer webbläsaren att uppdatera adressfältet genom att lägga till alla fragment som kan utgöra en URL.

Om du då besöker https://example.com/ och klickar på en länk med #hashtag så kommer webbläsaren att lägga till den och visa den som https://example.com/#hashtag.

Javascriptkoden härunder inaktiverar just dessa automatiska uppdateringar av en URL när besökaren klickar på någon #ankarlänk som finns på samma sida.

// don't append anchor to url
window.addEventListener('DOMContentLoaded', function(event) {
	var links = document.getElementsByTagName('a');
	for (var i = 0; i < links.length; i++) {
		if (!links[i].hash) continue;
		if (links[i].origin + links[i].pathname != self.location.href) continue;
		(function (anchorPoint) {
			links[i].addEventListener('click', function(e) {
				anchorPoint.scrollIntoView(true);
				event.preventDefault();
			}, false);
		})(document.getElementById(links[i].hash.replace(/#/, '')));
	}
}, false);

Källa:https://perishablepress.com