Ir arriba con efecto deslizable

cristian_cena · #1 (**permalink**) 07/02/2010, 14:34

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!

Dany_s · #2 (**permalink**) 08/02/2010, 04:40

con este plugin

cristian_cena · #3 (**permalink**) 08/02/2010, 06:34

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.

mayid · #4 (**permalink**) 08/02/2010, 08:51

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.

cristian_cena · #5 (**permalink**) 08/02/2010, 08:57

Mayid, tanto tiempo che. Esta genial el plugin. Que idiota no me di cuenta XD. Gracias man!

Dany_s · #6 (**permalink**) 08/02/2010, 09:11

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 );
        });

cristian_cena · #7 (**permalink**) 08/02/2010, 11:09

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.

mayid · #8 (**permalink**) 08/02/2010, 11:28

Aca hay una almohadilla de mas:

Cita:

id="#link"

Saludos Cristian!

cristian_cena · #9 (**permalink**) 09/02/2010, 09:27

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!

Dany_s · #10 (**permalink**) 09/02/2010, 09:37

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>

mayid · #11 (**permalink**) 09/02/2010, 10:22

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".

cristian_cena · #12 (**permalink**) 09/02/2010, 14:33

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!