Ben's Hobbyhoekje -- Over het scherm scrollende Top-knop

Over het scherm scrollende Top-knop

Op pagina's met lange lijsten is het handig om steeds een knop tot je beschikking te hebben waarmee je met één klik van de muis naar het begin van de pagina kunt gaan, zonder steeds de schuifbalk te hoeven slepen. Dit is toegepast op sommige pagina's op deze site, zoals top-level pagina van de HTML-sectie. Daar zie je tekst "« Top" in de rechter onderhoek mee-scrollen met de pagina. Het is een link die een JavaScript-functie aanroept, die de browser naar boven laat scrollen.
Hier vind je de aanpak.

De tag <nobr> is obsolete en komt in de HTML5-standaard niet (meer) voor. Op het moment dat dit geschreven wordt (april 2020) wordt <nobr> door alle grote browsers nog volledig ondersteund en dat zal voorlopig wel zo blijven. Voor nieuwe websites wordt deze tag echter afgeraden.

De hier getoonde beschrijving is zeer summier. De code wordt niet uitgebreid besproken.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.

De code in de file jumptop.js kan eventueel worden aangepast voor eigen gebruik. Het gaat hierbij om de volgende regel code:
var displayed="<nobr><h4><b>« Top</b></h4></nobr>"
De tekst tussen de tags <nobr> en </nobr> kan worden gewijzigd. In dit geval gaat het om het stukje:
<h4><b>« Top</b></h4>
Met de tags <b> .... <b> worden de letters vet gedrukt.
Met de tags <h4> .... <h4> worden de letters wat groter gemaakt.
De tag <nobr> .... </nobr> zorgt er voor dat de scrollende tekst niet wordt onderbroken door een (door de browser gegenereerd) regeleinde. Zie echter de melding over <nobr> hier boven.
N.B.: De tekst van deze scrollende knop kan niet zonder meer worden vervangen door een plaatje.
Dit script werkt alleen met browsers die het DOM (Document Object Model ondersteunen. Dat zijn alle moderne browsers. In oudere versies van Internet Explorer (vóór versie 9) zal het niet werken omdat daar het DOM daar anders werkt.

Een dergelijk effect, waarbij gebruik wordt gemaakt van CSS, is beschikbaar. Zie het item "Terug- of Top-knop op een vaste plaats op het scherm".

Gebruik:

De code staat in de <HEAD>.
Voor optimale werking moet de code worden aangepast, zie hierboven.

De code ziet er als volgt uit:
(Zet dit JavaScriptje in de <HEAD>)

<script src="jumptop.js"></script>

Downloaden:

Druk op de knop: File: voorb019.zip, 960 bytes.

Opmerking:

De werking van dit script is niet optimaal. Als je terugkeert halverwege in een pagina verschijnt de tekst "« Top »" pas nadat je de schuifbalk hebt bewogen.