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





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?




Subir || Bajar

15 opiniones:

Σ=o) Pau :

Le dije a Twittboy que me encantó y me voy a hacer una adicta de tus barras jejejee :D
En cuanto pueda las pongo ya mismo en los 4 blog :D Eres un artistazo!!! :D

feliz comienzo de semana, besos ronroneados ^_^

Σ=o) Pau :

PD: ya estan en el balcón!!!!! yupi!!! prrrr^^

Σ=o) Pau :

pd3... en la voz son del tamaño exacto a mis bordes! eres un genio prrr^^ besos!

@

Reina por lo que veo en tu blog, te sale sólo el de "bajar", sin embargo, está bien colocado en tu plantilla. Viendo tu plantilla, lo único que te falta es una "/" al inicio del css (antes de los guiones y de *) que al faltar hace que se "comente" el css de la primera barra. Pon esa barra y verás cómo te aparece!!
Por cierto... qué tal los "problemas" en tu blog? sabes a quién me refiero,no? se solucionan, verdad? eso espero... Tú sigue así, que nos encantas por aquí!!

Pau ya las he visto... en azul, eh!! por cierto, si les pones "z-index:1;" en el CSS, te saldrán delante, ya que en "La voz..." se esconden tras la sidebar al reducir la ventana.
Me alegro de que te gusten!!

Saludos!!★

Reina :

Si Iván, venía a contarte que al final me salió; mañana le coloco la barra al CSS (ahora estoy muerta de sueño..., bostezo, jajaja); está genial!!!!

Miiiilllll Gracias de nuevo. Un beso

Reina :

¡¡¡Hecho!!!!

Los problemas de mi blog.... ufff!!!! Ya me lo han copiado, con todo el descaro y la impunidad del mundo; hasta utiliza mi foto y se pasea por todos los blogs haciéndose pasar por mi; vamos, ¿una joya! Pero en blogger todo vale, al parecer...

Yo, a lo mío; no tengo costumbre de ponerme a la altura de un gusano, jajajaj!!!

Me alegra mucho que os guste. Gracias por todo y un beso

@

Miiira... qué bien te quedaron,Reina.

Yo que tu no me preocuparía de las copias... al fin y al cabo el talento es "incopiable" y de eso andas bien provista...

Tú a lo tuyo y ni caso, que la envidia todos sabemos "que es lo que tiene".

Un beso!!★

Σ=o) Pau :

Feliiiiiiiiiiiiiz cumpleaños Iván, espero que tengas un hermoso día lleno de mimos y regaloneos que la vela extra se lo merece jeejeje.

Te dejo un regalito

Un abrazo y besos ronroneados

@

jajajaja!!! Muchas gracias Pau!!! y gracias por la tarta!! Oye... le falta un rozo, sinvergüenza!!! que es miiiiaaa!!

jajaja!!!

En serio, muchas gracias, Pau.

cargohe :

Ivan Aportaso ya lo puse en mi Blog http://cargohe.blogspot.com/
Pero como hago para que también suba, por que solo baja. Gracias de nuevo.

cargohe :

Iván Ahora que las coloque siempre visible, si sale para subir y bajar, pero como le hago para que también ocultas salgan las dos, por que cuando pongo el código de ocultas, solo sale para bajar. y me encanto este efecto.

@

cargohe es posible que te ocurra lo mismo que a Reina (los primeros comentarios) y que te falte algún signo al principio del CSS, porque el script está correcto en tu plantilla.

Vuelve a ponerlo (el ccs que oculta las barras) y revisa que esté bien completo...

...y vuelve para contarnos qué tal!!☺☺

Saludos!!

invitacion tuenti :

La verdad es muy util el scrip cuando uno elabora post extensos o que contienen mucho contenido o comentarios... de lo contrario solo aumentarias la carga del blog, y esto haria que ande lento...

Desplegar Formulario
Subir

Deja aquí tu comentario:
(y recuerda que hemos retirado los "Nofollow")

Directorios
Blogs con EÑE directorio de blogs
Enlázanos
Código +/-

Código +/-

Código +/-
 

Formulario de Contacto


Lo quieres?

Nombre*: E-Mail*:

Asunto:

Mensaje*:

¿Cuantos lados tiene un Cuadrado?*:


(Los campos marcados con * son obligatorios)