DanGrecks ~ ¡Ayuda WebMaster!

Volver Arriba Con Efecto Deslizante

En este tutorial aprenderemos a poner un "Volver Arriba" o algunos tambien lo conocen como "Ir al Cielo" con un efecto deslizante y apareciendo al hacer scroll. El ejemplo lo pueden ver en la esquina izquierda de abajo al hacer scroll en mi sitio web.

Primero empezaremos la apariencia, para esto utilizaremos CSS, que se puede modificar a su gusto (El mismo código presenta lo que es cada parte del código.), Esto lo pegaremos en CSS-Design Sin Style Tags:

/* Posición */ #nach_oben { position: fixed; bottom: 30px; margin-left: -150px; } /* Apariencia del botón */ #nach_oben a { width: auto; padding: 7px 12px 7px 17px; display: block; text-align: center; text-transform: uppercase; text-decoration: none; color: #FFFFFF; font-size: 11px; font-family: arial; background-color: #70BA00; /* Esquinas redondeadas */ border: 1px solid #c9c9c9; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* Transición */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } /* Al contacto con el Mouse */ #nach_oben a:hover { color: #fff; background-color: #548C00;}
Luego seguiremos con la Magia de todo, el Script (No ocupa modificaciones, mas bien si sabes lo que haces, puedes modificarlo), Esto lo pegaremos en Texto Sobre el Diseño:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script> $(document).ready(function(){ // hide #nach_oben first $("#nach_oben").hide(); // fade in #nach_oben $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#nach_oben').fadeIn(); } else { $('#nach_oben').fadeOut(); } }); // scroll body to 0px on click $('#nach_oben a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>
Y seguiremos con lo que lo hara funcionar, el HTML (Solo modificas el "Volver Arriba" por lo que quieres que diga), Esto lo pegaremos en Texto por Debajo de la Página:

<p id="nach_oben"> <a href="#top"><strong>Volver Arriba ↑</strong></a> </p>
Aqui terminamos este Tutorial. Espero haber podido ayudar, Saludos!