Porcentaje en la barra scroll conforme baja

By: Jonathan Lozano on 8:10

Este truco muestra básicamente el porcentaje de una página mientras se desplaza. Puede llegar a ser muy útil para sus visitantes para averiguar cuánto página han desplazado, o la cantidad de contenido se deja de ser leído. En esta entrada, les mostraré cómo agregar valor porcentual a una barra de desplazamiento en el Bloggers. Puedes ver la demostracon en este blog de pruebas (baja el scroll con el cursor)

AÑADIENDO EL TRUCO

---

Para comenzar nos vamos a Plantilla → Editar HTML  pero antes, no olvidar en crear un copia de seguridad de tu plantilla en caso de que algo salga mal.

Buscamos con CTRL+F la etiqueta ]]></b:skin> y antes pegamos:

#scroll {

display: none;

position: fixed;

top: 0;

right: 20px;

z-index: 500;

padding: 3px 8px;

background-color: #2187e7;

color: #fff;

border-radius: 3px;

}

#scroll:after {

content: ” ”;

position: absolute;

top: 50%;

right: -8px;

height: 0;

width: 0;

margin-top: -4px;

border: 4px solid transparent;

border-left-color: #2187e7;

}

Ahora debajo de la etiqueta </head> pegamos:

<div id='scroll'></div>

Por ultimo, buscamos la etiqueta </body> y arriba de ella pegar:

<script type='text/javascript'>

/*<![CDATA[*/

var scrollTimer = null;

$(window).scroll(function() {

var viewportHeight = $(this).height(),

scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,

progress = $(this).scrollTop() / ($(document).height() - viewportHeight),

distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;

$('#scroll')

.css('top', distance)

.text(' (' + Math.round(progress * 100) + '%)')

.fadeIn(100);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#scroll').fadeOut();

}, 1500);

});

/*]]>*/

</script>