Un sencillo "sube/baja" para tu blog o web.

Compartir

Desde hace poco más de una semana implementé en mi blog y en los principales blogs que he diseñado (TodoTwitter y Blogs con EÑE) un sencillo sistema de desplazamiento vertical que funciona gracias a un sencillo script (de la casa) que no necesita ninguna librería externa, ni Jquery, ni Scriptaculous... La razón es que me encanta el método de "ir arriba" con Jquery, pero muchas veces no quiero ir "arriba del todo", tan sólo quiero subir o bajar un par de párrafos o líneas y soy muy vago para utilizar el scroll del navegador... ejem...

Lo puedes ver funcionando y utilizarlo si desplazas el ratón hacia el borde izquierdo del blog. Se trata de dos barras o botones que aparecerán "onmouseover" en el borde de la ventana donde visualices el blog. Al situarse sobre la barra inferior te desplazarás hacia abajo, y si te sitúas sobre la superior, pues irás hacia arriba.

En mi caso he preferido que no se muestren las barras todo el rato para evitar que "tapen" contenido en pantallas pequeñas, aún a riesgo de que pasen "excesivamante" desapercibidas.

Es muy sencillo de colocar en cualquier web o blog y requiere de muy poco código; veamos:

El script, que debes colocar antes de </head>:

[+]Ver código

<script type='text/javascript'>
function pageScroll() {
window.scrollBy(0,50); // Incrementos del scroll horizontal y vertical al bajar
scrolldelay = setTimeout(&#39;pageScroll()&#39;,10); // velocidad del scroll -10-
}
function stopScroll() {
clearTimeout(scrolldelay);
}
function pageScrollup() {
parent.scrollBy(0,-50); // Incrementos del scroll horizontal y vertical al subir
scrolldelay = setTimeout(&#39;pageScrollup()&#39;,10); // velocidad del scroll -10-
}
</script>

En él puedes configurar lo que ves comentado:
El incremento del scroll.
La velocidad del scroll.

Un poco de CSS para darles un poco de estilo y situarlas en la pantalla:

/* ------------------ SUBE/BAJA ------------------------- */
.controlup {
top:0;
left:0;
background: #990000;
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
filter:alpha(opacity=0);
opacity:.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*--IE 8 Transparency--*/
cursor:pointer;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
.controlup:hover {
cursor:pointer;
filter:alpha(opacity=50);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE 8 Transparency--*/
}

.controldown {
bottom:0;
left:0;
background: #990000;
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
filter:alpha(opacity=0);
opacity:.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*--IE 8 Transparency--*/
cursor:pointer;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
.controldown:hover {
cursor:pointer;
filter:alpha(opacity=50);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*--IE 8 Transparency--*/
}

Si quieres que siempre esten visibles, el CSS es el siguiente:

/* ------------------ SUBE/BAJA ------------------------- */
.controlup {
top:0;
left:0;
background: #990000;
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}

.controldown {
bottom:0;
left:0;
background: #990000;
text-align:center;
padding:5px;
position:fixed;
height:50%;
width:15px;
cursor:pointer;
text-decoration:none;
color: #ffffff;
font-weight:bold;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}

Y finalmente, en la edición de nuestra plantilla y justo después de <body>:

<input class='controlup' onmouseout='stopScroll()' onmouseover='pageScrollup()' type='button' value=''/>
<input class='controldown' onmouseout='stopScroll()' onmouseover='pageScroll()' type='button' value=''/>

Con lo que se mostrarán las barras en nuestra web o blog.

Aviso, no es común colocar a la izquierda las barras de desplazamiento, sin embargo a mi me resultan tremendamente útiles a ese lado, incluso las "echo de menos" y las busco sin querer en otros blogs desde que las tengo instaladas en el mío... En cualquier caso, si quieres que aparezcan a la derecha, tan sólo tienes que sustituir left:0; por right:0; en el CSS.

Bueno, y tú qué opinas? vas a dejar a Moore sinff.. que te sniff..??Qué te parecen las barras?