Tutorial: 2 scroll or not 2 scroll

In de websitepitch van SammaSamma werd ons gevraagd eventueel een single page design te maken. Ik had er eerlijk gezegd nog nooit van gehoord, maar zag er uiteraard wel direct een uitdaging in. Nou moet mij van het hart dat ik een hekel heb aan ellenlange websites waarop ik eindeloos moet scrollen. Dus daar zocht ik een oplossing voor. Op http://users.skynet.be/javascript/scrolls/paginascroller.htm vond ik wat ik zocht. Download het script en volg de aanwijzingen.

Het nadeel van dit script, is dat je een btje tureluurs kunt worden als je van onderen helemaal terug naar boven wilt of andersom: de hele pagina schuift voorbij. Als je dit wilt voorkomen, gebruik dan een Xtra javascript.

Op de volgende links heb ik een voorbeeld gezet.

Voorbeeld 1

Hier is alleen het paginascroller.js gebruikt.
In de broncode is te zien hoe ieder deel een < div id > heeft, waarnaar verwezen wordt in de navigatie (in dit voorbeeld vanaf < !-- menu -- >).  De < div id > laat je leeg. De inhoud zet je onder deze tag.

Voorbeeld 2

Om te voorkomen dat de bezoeker helemaal scheel wordt van de heen en weer schuivende inhoud bij iedere muisklik, kun je onder de lege < div > nog een 'anker' plaatsen. Dit is te zien in de broncode. Geef het een andere naam dan de lege < div >. In de navigatie op deze pagina kun je zien dat bij sommige onderdelen het 'scroll-script' is verwijderd. In plaats daarvan is een < a href > naar de verschillende ankers gegeven. Het scrollen gebeurt nu alleen nog als je 1 onderdeel verder of terug wilt. In alle andere gevallen spring je meteen naar de aangeklikte link.


Ook is hier de scrollbalk 'verwijderd', op de volgende manier:
Zet dit in je style sheet:
body {
overflow:hidden;
}




Getest in IE8, Firefox, Chrome, Netscape, Opera en Safari.