Als ik naar 2de pagina navigeer gaat deze niet naar de bovenkant van de pagina

[ElsyV]

Op mijn pagina laat ik een aantal items zien.
Als ik onderaan deze pagina op de navigatie knop klik om naar de volgende pagina te gaan, dan schiet hij weer naar de onderkant van de pagina.
Hij begint dus niet bovenaan de pagina en je moet dus eerst naar boven scrollen.

Hoe zorg ik ervoor dat hij weer netjes bovenaan de volgende pagina begint?

 

[Naarling]

Heb je een link naar de pagina waar we het probleem kunnen zien?

 

[ElsyV]

Heb je een link naar de pagina waar we het probleem kunnen zien?

Hmm, het is nu niet meer aan de orde. Het werkt gewoon goed nu.
Waarschijnlijk heb ik met het aanpassen van een ander stukje code dit probleem meteen opgelost.

 

[ElsyV]

Ik dacht dat het opgelost was maar niet op alle pagina's.

Klik maar eens hier en navigeer dan door de pagina's. Je komt dan op de volgende pagina bijna onderaan uit in plaats van netjes bovenaan.

 

[Tha Devil]

Ik krijg zo het vermoeden dat dat door de HTML-structuur van het beoordelingenformulier komt:

<input type="text" name="naam" id="naam" required="" autofocus="">

Die autofocus zorgt er voor dat je browser dat veld direct selecteert.

 

[ElsyV]

Ik krijg zo het vermoeden dat dat door de HTML-structuur van het beoordelingenformulier komt:

<input type="text" name="naam" id="naam" required="" autofocus="">

Die autofocus zorgt er voor dat je browser dat veld direct selecteert.

Dat was inderdaad het probleem!
Hoe kom je erop, echt heel erg bedankt want het was een lastig probleem.

Denk je dat ik die "autofocus" nog wel kan gebruiken op een manier zodat het geen invloed heeft op de rest?

 

[Tha Devil]

Ik zou dan met tabindex gaan werken, als mensen willen reageren zullen ze toch wel klikken: Een tabindex zorgt er in ieder geval voor dat ze pas na één toets bij het formulier komen

Wat je wellicht wel kan proberen is via een javascript controleren of het invoerveld zichtbaar is binnen de viewport en als dat zo is het focus-event van het veld activeren.

Via deze stackoverflow discussie kom ik op deze functie:
[js]
function elementInViewport(el) {
var rect = el.getBoundingClientRect();

return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
);
}[/js]

Jouw implementatie zal dan zoiets zijn:
[js]
function elementInViewport(el) {
var rect = el.getBoundingClientRect();

return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
);
}

if(elementinViewport(document.getElementById('naam')))
{
document.getElementById('naam').focus();
}
[/js]

Mijn javascript kennis is wat roestig aangezien ik tegenwoordig lekker lui gebruik maak van jQuery

 

[ElsyV]

Dank je!