Seite springt bei klick auf Verlinkung an den Seitenanfang

[Gunnar Bittersmann]

@@Felix Riesterer

Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben

Und deshalb scheint mir a hier unangebracht. Es ist keine Navigation; es sind Aktionen. Das sollten also button-Elemente sein:

<form>
	<button name="a">a</button>
	<button name="b">b</button>
</form>

oder mit Listen-Markup:

<form>
	<ul>
		<li><button name="a">a</button></li>
		<li><button name="b">b</button></li>
	</ul>
</form>

Wenn da mal das = am Ende (die URIs wären https://example.net?a= usw.) nicht stört.

Ansonsten müsste man die Aktion wohl mit JavaScript auslösen. Das Funktionieren des Dingens ohne JavaScript will man sicher nicht unbedingt aufgeben. Was man tun könnte, ist die Links erst mit JavaScript in Buttons umzuwandeln.

Die Menü-Liste bekommt eine ID verpasst: <ul id="menu"> (und form muss nicht außenrum).

Das Script erzeugt die Buttons und packt das jeweilige a-Element hinein. Dazu muss dessen href-Attribut entfernt werden, denn interaktive Elemente sind innerhalb eines Buttons nicht erlaubt.

const menuItemElements = document.querySelectorAll('#menu > li');

menuItemElements.forEach(menuItemElement => {
	let aElement = menuItemElement.firstChild;
	let location = aElement.href;
	aElement.removeAttribute('href');
	
	let buttonElement = document.createElement('button');				
	buttonElement.addEventListener('click', event => {
		window.location = location;
	});
	buttonElement.appendChild(aElement);
	
	menuItemElement.appendChild(buttonElement);
});

---

      /* Button-Bilder */
      a[href="?a"] {
        background-image: url(a.png);
      }
      a[href="?b"] {
        background-image: url(b.png);
      }

Das ist ein sicheres Indiz, dass die Icons in Markup gehören. Sie sind keine Verzierung, sondern Inhalt.

Also <a href="?a"><img src="a.png" alt="a"></a>
bzw. <button name="a"><img src="a.png" alt="a"></button>.

LLAP 🖖