Botón subir arriba

Hoy vamos a mostraros como podemos añadir un botón de ir arriba especial.

Hemos ya mostrado anteriormente en este

post

Poner un botón "Ir arriba" con jQuery

Como ya hemos dicho es una opción muy importante para que nuestros lectores puedan desplazarse a la parte superior de nuestro blog.

Para insertar este widget es ir a nuestro blog > Tema > Editar HTML >

Buscamos con CTRL + F </body>

Ahora arriba pegamos el siguiente código:

Código

<style>

#sbtbacktotop{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5rgkLOGP0_qmngiAXB2ouw4sjg49nyxTqJG-VVS7JMBwpzoTcIR1uVThJCr9B105Dba9V8decrZdIz0FVaNCV9UJCAstXK6W0LsN3rGsIO9zaQfnjgB5wdxXGsxp-zd-T3PhVGy4paIt/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;

height: 130px;

width: 72px;

padding:5px;

position:fixed;

bottom: 5px;

right: 5px;

cursor:pointer;

transition:none;

    z-index:15;

}

  #sbtbacktotop:hover{

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5rgkLOGP0_qmngiAXB2ouw4sjg49nyxTqJG-VVS7JMBwpzoTcIR1uVThJCr9B105Dba9V8decrZdIz0FVaNCV9UJCAstXK6W0LsN3rGsIO9zaQfnjgB5wdxXGsxp-zd-T3PhVGy4paIt/s1600/back-to-top-sprite-30224d9b.png)no-repeat;

background-position: 0 -142px;

}

</style>

<!-- Back to top button by SBT -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>

<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100)

{$("#sbtbacktotop").removeAttr("href");$("#sbtbacktotop").stop().animate(

{bottom:"0"},{duration:100,queue:false})}

else{$("#sbtbacktotop").stop().animate({bottom:"30000"},

{duration:8000,queue:false})}});$(function()

{$("#sbtbacktotop").click(function()

{$("html, body").animate({scrollTop:0},"slow");

return false})});

//]]>

</script>

<!-- Code provided to you by sbt -->

<a href='#' id='sbtbacktotop'></a>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

Mouse over me

Hello World!