JavaScript: lägg inte till ankare

Postad: 15.11.2020

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

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.