Geef elke willekeurige pagina een soft-scroll effect door de hieronder-staande style-sheet in de head-sectie te plaatsen en het (ook hieronder aanwezige) javascript zo laag als mogelijk in de body-sectie. Als je dan de paar regeltjes html-code ergens op de pagina (ook in de body-sectie) plaatst, zal de scroll-procedure "start-klaar" zijn.
<div id="scroll_knop_positie">
<ol class="scroll_knop">
<li>
<input type="button" value="▲" onclick="softscroll_naar_boven()" />
</li>
<li>
<input type="button" value="▼" onclick="softscroll_naar_beneden(0)" />
</li>
</ol>
</div>
<style type="text/css">
.scroll_knop{
list-style:none;
display:inline-block;
line-height:0;
vertical-align:middle}
#scroll_knop_positie{
position:fixed;
top:5em;
right:3em}
.scroll_knop input{
color:#ccc;
background:#030;
font-size:2em;
border:3px #888 outset;
height:1.5em;
width:2em}
.scroll_knop input:hover{
color:#fff;
background:#030}
</style>
<script>
/*global self: false */
/*global window: false */
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var is_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
var relatieve_scrollhoogte = 50;
var hoogte_totale_pagina;
var hoogte_van_pagina;
var viewpoorthoogte;
var smooth_scroll_positie;
var smooth_scroll_positie_again;
var smooth_scroll_naar;
var timer = 0;
var timer2 = 0;
var scroll_vertraging = 1;
var hoeveel_pixels_scrollen = 40;
var hoeveel_pixels_scrollenomhoog = 60;
var welke_scroll_knop_werkt;
var benoem_de_body;
var softscroll_naar_boven_type = -1;
var softscroll_naar_boven_interval = 0;
function softscroll_is_beneden() {
hoogte_van_pagina = document.body.offsetHeight;
if (self.pageYOffset) {
smooth_scroll_positie_again = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
smooth_scroll_positie_again = document.documentElement.scrollTop;
} else if (document.body) {
smooth_scroll_positie_again = document.body.scrollTop;
}
if (((smooth_scroll_positie_again + viewpoorthoogte) + 15) < hoogte_van_pagina) {
window.scrollBy(0, 12);
timer2 = setTimeout(function() {
softscroll_is_beneden();
},
2);
} else {
window.scrollTo(0, hoogte_van_pagina);
}
return true;
}
function softscroll_omhoog_timer() {
if (welke_scroll_knop_werkt == 1) {
return false;
}
welke_scroll_knop_werkt = 2;
var y = softscroll_naar_boven_type == 1 ? document.documentElement.scrollTop: document.body.scrollTop;
var aantalpixelsverplaatsen = 10;
y -= Math.ceil(y * aantalpixelsverplaatsen / 100);
if (y < 0) {
y = 0;
}
if (softscroll_naar_boven_type == 1) {
document.documentElement.scrollTop = y;
} else {
document.body.scrollTop = y;
}
if (y === 0) {
clearInterval(softscroll_naar_boven_interval);
softscroll_naar_boven_interval = 0;
welke_scroll_knop_werkt = 0;
}
}
function softscroll_naar_boven() {
if (welke_scroll_knop_werkt == 1) {
return false;
}
if (softscroll_naar_boven_interval === 0) {
if (document.documentElement && document.documentElement.scrollTop) {
softscroll_naar_boven_type = 1;
} else if (document.body && document.body.scrollTop) {
softscroll_naar_boven_type = 2;
} else {
softscroll_naar_boven_type = 0;
}
if (softscroll_naar_boven_type > 0) {
softscroll_naar_boven_interval = setInterval(function() {
softscroll_omhoog_timer();
},
1);
}
}
}
function haal_document_element_naam() {
return (document.compatMode && document.compatMode == "CSS1Compat") ? "documentElement": "body";
}
function start_smooth_scroll() {
benoem_de_body = document[haal_document_element_naam()];
}
function softscroll_naar_beneden(check) {
if (welke_scroll_knop_werkt == 2) {
return false;
}
if (check === 0) {
welke_scroll_knop_werkt = 1;
if (typeof window.innerWidth != 'undefined') {
viewpoorthoogte = window.innerHeight;
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth !== 0) {
viewpoorthoogte = document.documentElement.clientHeight;
} else {
viewpoorthoogte = document.getElementsByTagName('body')[0].clientHeight;
}
if (self.pageYOffset) {
smooth_scroll_positie = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
smooth_scroll_positie = document.documentElement.scrollTop;
} else if (document.body) {
smooth_scroll_positie = document.body.scrollTop;
}
hoogte_totale_pagina = document.body.offsetHeight;
}
if ((smooth_scroll_positie + viewpoorthoogte) > (hoogte_totale_pagina - viewpoorthoogte)) {
smooth_scroll_positie = 0;
clearTimeout(timer);
softscroll_is_beneden();
welke_scroll_knop_werkt = 0;
return false;
}
smooth_scroll_naar = (viewpoorthoogte + smooth_scroll_positie);
var y = (benoem_de_body.scrollTop + relatieve_scrollhoogte);
if (is_chrome || is_safari) {
y = document.body.scrollTop + relatieve_scrollhoogte;
}
if (y < smooth_scroll_naar) {
window.scrollBy(0, hoeveel_pixels_scrollen);
timer = setTimeout(function() {
softscroll_naar_beneden(1);
},
scroll_vertraging);
} else {
clearTimeout(timer);
}
welke_scroll_knop_werkt = 0;
return false;
}
window.onload = start_smooth_scroll;
</script>
Om het smooth-scroll effect beter te kunnen demonstreren is er aan de onderkant van deze pagina wat tekst toegevoegd. Dit is om te laten zien dat de scroll "netjes" vertraagt als de bodem bereikt is. Als er geen javascript voorhanden is zal niemand daar iets van merken. De gehele soft-scroll procedure berust op het "progressive enhancement" principe.