Hay algo de esta historia que no me cierra.
La página en cuestión, cambia el alto de su contenido en forma dinámica?, es decir, puede que se agreguen elementos que la lleven de no tener a tener scroll?
Si este no es el caso, no tiene mucha gracia,
Dicho esto, oportuna la apreciación de @furoya.
Con su aporte(lo hice algo más compatible) más lo que propongo, y si de no usar Jquery se trata, les dejo esto
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> /*<![CDATA[*/
body{
background: #AFAE85;
font-weight: bold;
}
.relleno{
display: none;
}
.b_scroll{
display: none;
}
/*]]>*/
<script type="text/javascript"> //<![CDATA[
// uso
// scrollSuave('ddd',3000) --> id de la capa,tiempo en milisegundos, si id de capa es 0, va a la coordenada top 0
var altura,winH,timerY;
var tags_botones = new Array();
onscroll = function(){
altura = document.body.clientHeight-window.innerHeight;
winH = document.documentElement.offsetHeight;
if (document.body && document.body.offsetHeight) {
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetHeight ) {
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}
if((altura-10) > winH){
tags_botones=document.getElementsByTagName('button');
var i;
for (i=0; i<tags_botones.length; i++) {
if (tags_botones[i].className=='b_scroll') {
tags_botones[i].style.display = 'block';
}
}
}
} // fin onscroll
function scrollSuave(capa,tiempo){
var PosObjeto = document.getElementById(capa);
if(capa == 0){
var PosObjeto = document.body;
}
var PosY = 0;
while(PosObjeto) {
PosY += (PosObjeto.offsetTop - PosObjeto.scrollTop + PosObjeto.clientTop);
PosObjeto = PosObjeto.offsetParent;
}
hacerScroll(document.documentElement,PosY, tiempo);
} // fin scroll suave
function hacerScroll(elementoY, destinoY, demora) {
if (demora < 0) return;
var diferencia = destinoY - elementoY.scrollTop;
var pixelsY = diferencia / demora * 10;
timerY= setTimeout(function() {
elementoY.scrollTop = elementoY.scrollTop + pixelsY;
hacerScroll(elementoY, destinoY, demora - 10);
if(elementoY.scrollTop == destinoY){
clearTimeout(timerY);
}
}, 10);
} // fin scroll suave
// solo para la demo, genera contenido extra y scroll
var tags_div = new Array();
function rellenar(estado){
tags_div=document.getElementsByTagName('div');
tags_botones=document.getElementsByTagName('button');
var i;
var b;
for (i=0; i<tags_div.length; i++) {
if (tags_div[i].className=='relleno') {
if(estado == 'mostrar'){
tags_div[i].style.display = 'block';
}
if(estado == 'ocultar'){
tags_div[i].style.display = 'none';
for (b=0; b<tags_botones.length; b++) {
if (tags_botones[b].className=='b_scroll') {
tags_botones[b].style.display = 'none';
}
}
}
}
}
} // fin rellenar
//]]>
<input type="button" onclick="rellenar('mostrar')" value="rellenar" /> <input type="button" onclick="rellenar('ocultar')" value="ocultar" /> <div class="relleno" style="height: 100px"><!-- relleno alto --></div> <div id="aaa" style="color: green;">Demo scroll suave. Demo scroll suave. Demo scroll suave.
</div> <div class="relleno" style="height: 1500px"><!-- relleno alto --></div> <div id="ddd" style="color: darkred;">Demo scroll suave. Demo scroll suave. Demo scroll suave.
</div> <div class="relleno" style="height: 800px"><!-- relleno alto --></div> <button class="b_scroll" onclick="scrollSuave('ddd',3000);">Rojo
</button> <button class="b_scroll" onclick="scrollSuave('aaa',100);">Verde
</button> <button class="b_scroll" onclick="scrollSuave(0,3000);">Top
</button>
Saludos