Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Ir arriba con efecto deslizable

Estas en el tema de Ir arriba con efecto deslizable en el foro de Frameworks JS en Foros del Web. Hola: Actualmente para "ir arriba" del sitio, incluyo Código: <a href="#">ir arriba</a> Ahora, como puedo hacer para que al pulsar "ir arriba" no se produzca ...
  #1 (permalink)  
Antiguo 07/02/2010, 14:34
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Ir arriba con efecto deslizable

Hola:

Actualmente para "ir arriba" del sitio, incluyo
Código:
<a href="#">ir arriba</a>
Ahora, como puedo hacer para que al pulsar "ir arriba" no se produzca el corte en seco sino que suba un scroll automático con un efecto deslizante? He visto el efecto en la web pero no me acuerdo en que sitio, espero haberme explicado bien.
Se puede utilizar javascript puro para llevar a cabo lo que pido? o bien con jquery también me serviría.

Se agradece cualquier tutorial, consejo, etc.

Gracias, saludos!
  #2 (permalink)  
Antiguo 08/02/2010, 04:40
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Ir arriba con efecto deslizable

con este plugin
  #3 (permalink)  
Antiguo 08/02/2010, 06:34
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Ir arriba con efecto deslizable

Gracias Dany_s, mira soy nuevo con jquery, si no es molestia me pasarías una referencia de como usar el plugin?

Desde ya muchas gracias!

Un saludo.
  #4 (permalink)  
Antiguo 08/02/2010, 08:51
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Ir arriba con efecto deslizable

Hey, Cristian! Tenes los links en la misma pagina de la demo (arriba a la derecha).

Ahi va: http://flesler.blogspot.com/2007/10/...scroll-10.html

Recién descubri un par de aplicaciones para este plugin. Lo voy a usar. Esta bueno.
  #5 (permalink)  
Antiguo 08/02/2010, 08:57
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Ir arriba con efecto deslizable

Mayid, tanto tiempo che. Esta genial el plugin. Que idiota no me di cuenta XD. Gracias man!
  #6 (permalink)  
Antiguo 08/02/2010, 09:11
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Ir arriba con efecto deslizable

el plugin es de un desarrollador de jquery, es argentino pero no sé porqué tiene toda la doc en inglés


hciendo click en un link con id #link hasta el body
Código HTML:
        $('#link').click( function(){
            $().scrollTo('body',800 );
        });
  #7 (permalink)  
Antiguo 08/02/2010, 11:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Ir arriba con efecto deslizable

Hola chicos, disculpen, enserio, pero no logro hacer funcionar el plugin, les muestro como lo hago:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ $('#link').click( function(){ $().scrollTo('body',800 ); }); });
</script> </head> <body> <div> <h1>Título 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien nisl, iaculis nec condimentum ultricies, interdum id enim. Donec a tristique purus. Sed consectetur mi eget lacus porta ac varius nisl iaculis. Proin enim arcu, cursus ut ullamcorper et, feugiat non nisl. Praesent tortor orci, vehicula a tempor rhoncus, suscipit sed dui. In hac habitasse platea dictumst. Curabitur sit amet risus sed nunc eleifend consectetur et id lacus. Nam vulputate nunc ut massa fermentum venenatis. Sed diam quam, sagittis eu sollicitudin a, mollis vitae diam. Nunc sed ante dolor, eu semper libero. Duis vitae ante eu velit luctus ullamcorper. Aliquam at libero nibh. Vestibulum dictum fermentum nisl, id condimentum mauris varius id. Ut laoreet, nisl non malesuada interdum, tortor orci commodo orci, ut aliquam tortor orci a tortor. Vivamus tortor odio, volutpat vitae venenatis sit amet, tincidunt nec mi. Aliquam scelerisque fermentum suscipit.</p> <h2>Título 2</h2> <p>Morbi imperdiet elementum malesuada. Aenean porta, lectus in auctor dapibus, neque enim suscipit eros, ac dictum erat sapien vulputate mauris. Curabitur porta massa lobortis metus condimentum nec tempor tortor tincidunt. Suspendisse laoreet condimentum dolor ut facilisis. Nunc volutpat arcu et justo cursus egestas. Pellentesque fringilla leo id risus euismod venenatis. Vivamus fermentum rhoncus libero, a hendrerit elit consectetur vel. Pellentesque varius tincidunt ligula sit amet elementum. Nulla pharetra aliquet mi, ac malesuada urna pellentesque quis. Donec laoreet, felis nec laoreet mollis, elit ligula euismod nisl, sed ullamcorper diam erat quis dui. Sed a nisl fringilla magna interdum ullamcorper ut nec felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nulla lectus, quis convallis dui. Aliquam erat volutpat. Mauris a sapien ut sapien varius porttitor. Proin fermentum tellus in leo hendrerit et auctor mauris scelerisque. Integer euismod porta turpis, ut posuere augue gravida a. Aliquam risus ante, elementum viverra congue quis, placerat et odio. Nunc blandit enim sed nisi pretium molestie.</p> <h3>Título 3</h3> <p>Fusce vel tellus id enim lacinia aliquam. Curabitur sodales scelerisque interdum. Donec ac lectus sed ipsum imperdiet volutpat vel sit amet orci. Etiam tempus, neque vitae malesuada tristique, diam mi ultricies enim, a feugiat purus risus non libero. Aliquam a ligula eu libero gravida facilisis et sed erat. Etiam sagittis sollicitudin tortor. Mauris eget sapien eget quam scelerisque fringilla eget vitae erat. Aliquam sed purus lorem. Etiam euismod dapibus congue. Nullam lectus justo, ultricies sed rhoncus at, egestas at diam. Suspendisse potenti. Vivamus dignissim nunc eu urna faucibus laoreet. Cras pulvinar porta dignissim. Nulla eget magna ac nunc ultricies commodo laoreet et nunc. Phasellus nec magna non est vehicula sodales. Nam nulla ipsum, dapibus quis pulvinar eu, venenatis sit amet lorem. Etiam quis euismod arcu.</p> <p>Morbi imperdiet elementum malesuada. Aenean porta, lectus in auctor dapibus, neque enim suscipit eros, ac dictum erat sapien vulputate mauris. Curabitur porta massa lobortis metus condimentum nec tempor tortor tincidunt. Suspendisse laoreet condimentum dolor ut facilisis. Nunc volutpat arcu et justo cursus egestas. Pellentesque fringilla leo id risus euismod venenatis. Vivamus fermentum rhoncus libero, a hendrerit elit consectetur vel. Pellentesque varius tincidunt ligula sit amet elementum. Nulla pharetra aliquet mi, ac malesuada urna pellentesque quis. Donec laoreet, felis nec laoreet mollis, elit ligula euismod nisl, sed ullamcorper diam erat quis dui. Sed a nisl fringilla magna interdum ullamcorper ut nec felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget nulla lectus, quis convallis dui. Aliquam erat volutpat. Mauris a sapien ut sapien varius porttitor. Proin fermentum tellus in leo hendrerit et auctor mauris scelerisque. Integer euismod porta turpis, ut posuere augue gravida a. Aliquam risus ante, elementum viverra congue quis, placerat et odio. Nunc blandit enim sed nisi pretium molestie.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien nisl, iaculis nec condimentum ultricies, interdum id enim. Donec a tristique purus. Sed consectetur mi eget lacus porta ac varius nisl iaculis. Proin enim arcu, cursus ut ullamcorper et, feugiat non nisl. Praesent tortor orci, vehicula a tempor rhoncus, suscipit sed dui. In hac habitasse platea dictumst. Curabitur sit amet risus sed nunc eleifend consectetur et id lacus. Nam vulputate nunc ut massa fermentum venenatis. Sed diam quam, sagittis eu sollicitudin a, mollis vitae diam. Nunc sed ante dolor, eu semper libero. Duis vitae ante eu velit luctus ullamcorper. Aliquam at libero nibh. Vestibulum dictum fermentum nisl, id condimentum mauris varius id. Ut laoreet, nisl non malesuada interdum, tortor orci commodo orci, ut aliquam tortor orci a tortor. Vivamus tortor odio, volutpat vitae venenatis sit amet, tincidunt nec mi. Aliquam scelerisque fermentum suscipit. </p> <a id="#link" href="#">ir arriba</a> </div> </body> </html>
Gracias de antemano.
  #8 (permalink)  
Antiguo 08/02/2010, 11:28
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Ir arriba con efecto deslizable

Aca hay una almohadilla de mas:

Cita:
id="#link"
Saludos Cristian!
  #9 (permalink)  
Antiguo 09/02/2010, 09:27
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Ir arriba con efecto deslizable

Mayid, resulta que quito la almohadilla que mencionas
Código:
<a href="#">ir arriba</a>
y sigue sin producirse el efecto deslizante.
Parece que tendré que estudiar más a fondo jQuery .
Saludos!
  #10 (permalink)  
Antiguo 09/02/2010, 09:37
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Ir arriba con efecto deslizable

el dijo que en id="#link" hay una comilla de mas, entonces tendria que quedar id="link" pero vos estas sacando todo el atributo id


completo tendria que quedar asi
<a id="link" href="#">ir arriba</a>
  #11 (permalink)  
Antiguo 09/02/2010, 10:22
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Ir arriba con efecto deslizable

Cita:
<a id="link" href="#">ir arriba</a>
Tal cual. Jquery usa el simbolo # (almohadilla) para referirse a un atributo id. No te acordas?

Tambien usa el "." (punto) para referirse al atributo class. Pero esto no significa que efectivamente haya que nombrar con almohadillas y puntos los identificadores.

Lo que esta pasando es que jquery no detecta ningun id llamado "link".
  #12 (permalink)  
Antiguo 09/02/2010, 14:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Ir arriba con efecto deslizable

AAhh pero si seré animal!!! solo quité el "#" y funcionó (no se porque incluí # en el id de una etiqueta, supongo que por despistado xD). Perdonen che. Y muchisimas gracias a ambos!

Etiquetas: arriba, efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:37.