Como adicionar uma barra deslizante a um botão no meu site

Joaco · 17/06/2011

Estoy haciendo un nuevo sitio y le estoy cambiando algunas cosas en el diseño. He entrado a muchos sitios populares para "robar" algunos widgets lindos, y me encuentro con que en AyudaWordpress.com hay una barra debajo de los posts para ir nuevamente a la parte superior de la página. Ya pude colocarla, incluso modifiqué la imagen y el CSS para adaptarla al tamaño de mi sitio. Pero no puedo conseguir el efecto deslizante que ellos logran hacer. En otras palabras, no encuentro ninguna señal del script que ejecute la función y por eso vengo acá, para ver si alguno de ustedes sería tan amable y atento de poder encontrar ese script y proporcionármelo para que pueda lograr el efecto.

Por si no entendieron todavía, me refiero a esto...

Enlace eliminado

looree · 17/06/2011

Vos necesitas que al hacer click en la barra te lleve a la parte superior? si es asi se hace con puro html:

pones arriba un div vacio o un br con el id top
y ahi abajo pones un enlace "a" que te lleve al id ese.

Inserir CODE, HTML ou PHP:

<div id="top">
</div>
contenido

<a href="#top"><img src="lalal"></img></a>

ruyjol · 17/06/2011

Si no me equivoco es un script, checate este:

Inserir CODE, HTML ou PHP:

echo'

<script>
function scrollUp(){
   var cs = (document.documentElement && document.documentElement.scrollTop)? document.documentElement : document.body;
   var step = Math.ceil(cs.scrollTop / 10);
   scrollBy(0, (step-(step*2)));
   if(cs.scrollTop>0)
   setTimeout("scrollUp()", 40);
}
</script>

aqui hay un tutorial que puede funcionar, no lo he probado pero se ve bien
http://www.disenopaginasweb.com/2011/04/como-crear-un-efecto-de-subir-arriba-con-jquery/

Joaco · 17/06/2011

looree disse:
Vos necesitas que al hacer click en la barra te lleve a la parte superior? si es asi se hace con puro html:

pones arriba un div vacio o un br con el id top
y ahi abajo pones un enlace "a" que te lleve al id ese.

Inserir CODE, HTML ou PHP:

<div id="top"> </div> contenido <a href="#top"><img src="lalal"></img></a>

No, mejor leé de nuevo, lo que yo necesito es lograr el efecto deslizante al subir, gracias de antemano 😀

looree · 17/06/2011

Joaco disse:
No, mejor leé de nuevo, lo que yo necesito es lograr el efecto deslizante al subir, gracias de antemano 😀

Si, ahi entre al sitio y vi el efecto. Disculpas

Angel Ortega · 17/06/2011

Ese es el codigo, aun que me da la impresion de que ahi hay dos funciones juntas, ponla completa y haber si te da el efecto, a mi tambien me gusto, pero no habia hecho por buscarlo.

Inserir CODE, HTML ou PHP:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('input[title!=""]').hint();
		$('textarea[title!=""]').hint();
		
		$('.contienederpost').mouseenter(function()
		{
			var id = $(this).parent().attr('id');				
			$('#date-'+id).animate(
			{				
				left: '0'
			},300,function(){});					
		});
		
		$('.contienederpost').mouseleave(function()
		{
			var id = $(this).parent().attr('id');				
			$('#date-'+id).animate(
			{				
				left: '8px' 
			},300,function(){});					
		});			
	});
	$(function(){

     $('a[href*=#]').click(function() {

     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
         && location.hostname == this.hostname) {

             var $target = $(this.hash);

             $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

             if ($target.length) {

                 var targetOffset = $target.offset().top;

                 $('html,body').animate({scrollTop: targetOffset}, 1000);

                 return false;

            }

       }

   });

});
</script>

Aqui puedes ver un tuto tambien

Adiccion Blogger: Botón Subir y Bajar en Blogger con Efecto jQuery

Es para blogger dice, pero debe ser facil de adaptar

Joaco · 17/06/2011

ruyjol disse:
Si no me equivoco es un script, checate este:

Inserir CODE, HTML ou PHP:

echo' <script> function scrollUp(){ var cs = (document.documentElement && document.documentElement.scrollTop)? document.documentElement : document.body; var step = Math.ceil(cs.scrollTop / 10); scrollBy(0, (step-(step*2))); if(cs.scrollTop>0) setTimeout("scrollUp()", 40); } </script>

aqui hay un tutorial que puede funcionar, no lo he probado pero se ve bien
Diseño paginas web » Como crear un efecto de “Subir arriba” con jQuery?

¡Perfecto! Muchísimas gracias por el tutorial, ya lo hice: Enlace eliminado... díganme si les gusta por favor 😉

Angel Ortega · 17/06/2011

Ya viendo el codigo en un editor, separandolo, si eran dos funciones, con esta hace el efecto, pero debes tener activo jquery

Inserir CODE, HTML ou PHP:

<script type="text/javascript" charset="utf-8">
	$(function(){

     $('a[href*=#]').click(function() {

     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
         && location.hostname == this.hostname) {

             var $target = $(this.hash);

             $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

             if ($target.length) {

                 var targetOffset = $target.offset().top;

                 $('html,body').animate({scrollTop: targetOffset}, 1000);

                 return false;

            }

       }

   });

});
</script>

Inserir CODE, HTML ou PHP:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

ruyjol · 18/06/2011

Joaco disse:
¡Perfecto! Muchísimas gracias por el tutorial, ya lo hice: Enlace eliminado... díganme si les gusta por favor 😉

Quedó perfecto!!

enhorabuena

Nachitox · 18/06/2011

Joaco robawidgets (?)

se ve bien, pero creo que podrías cambiar la imagen por otra para que no se note tanto que es de otro sitio y además añadirle margin para que se separe bien del último post.

Saludos.

Joaco · 18/06/2011

Nachitox disse:
Joaco robawidgets (?)

se ve bien, pero creo que podrías cambiar la imagen por otra para que no se note tanto que es de otro sitio y además añadirle margin para que se separe bien del último post.

Saludos.

Es que me gusta como quedó, parece como si fuese la linea de las etiquetas xD

Como adicionar uma barra deslizante a um botão no meu site

Joaco

looree

ruyjol

Joaco

looree

Angel Ortega

Joaco

Angel Ortega

ruyjol

Nachitox

Joaco

Tópicos similares