Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje26-10-2013, 16:56 (UTC)    
Título del mensaje: [Resuelto] Boton ir arriba o ir al cielo

He estado buscando miles de códigos para tenerlo pero no me funcionan, aquí posteo algunos de los que he utilizado. Los he puesto en todos lados.
Código:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src=" http://img.webme.com/pic/r/ranma-y/iconoirarriba.png " /></a>

Código:
<a href="#"><img src="http://img.webme.com/pic/r/ranma-y/iconoirarriba.png" title="Ir arriba" style="position: fixed; bottom: 10px; left: 2%;" /></a>


Gracias de antemano


Ultima edición por inuyasha-y el Sab Oct 26, 2013 1:38 pm; editado 1 vez
Mensaje26-10-2013, 17:03 (UTC)    
Título del mensaje:

Prueba este (las imágenes se las tienes que poner tu):

Código:

<script language="JavaScript">
function abajo() {
window.scrollBy(0,20); // velocidad abajo
scrolldelay = setTimeout('abajo()',55); // tiempo
}
function subir() {
window.scrollBy(0,-20); // velocidad subir
scrolldelay = setTimeout('subir()',55); // tiempo
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
<a style="display:scroll;position:fixed;bottom:40px;right:10px;" onmouseover="abajo()" onmouseout="stopScroll()" href="" title="Bajar"><img src="URL FLECHA BAJAR AQUÍ"/></a>
<a style="display:scroll;position:fixed;bottom:90px;right:10px;" onmouseover="subir()" onmouseout="stopScroll()" href="" title="Subir"><img src="URL FLECHA SUBIR AQUÍ"/></a>


Ultima edición por websoporte el Sab Oct 26, 2013 1:04 pm; editado 1 vez
Mensaje26-10-2013, 17:37 (UTC)    
Título del mensaje:

Muchas gracias me ha servido mucho,gracias por tu ayuda

Saludos y suerte con tu web
Mensaje26-10-2013, 17:50 (UTC)    
Título del mensaje:

Hola Amigo! Bueno, pues a lo que te refieres es que al hacer scroll aparezca algo que diga volver arriba, tengo tu solución

Primero Pondremos la apariencia con CSS, Modificalo a tu gusto:
Código:
/* 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 con el Script, esto no ocupa modificaciones:
Código:
<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 lo que quiera que diga cuando aparezca al hacer el scroll:
Código:
<p id="nach_oben">
<a href="#top"><strong>Volver Arriba ↑</strong></a>
</p>


Espero poderte haber ayudado, Saludo!
Mensaje26-10-2013, 21:18 (UTC)    
Título del mensaje:

Ya lo había resuelto de todos modos muchas gracias siempre va bien tener dos tipos de soluciones

Saludos y suerte con tu web
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group