Cómo agregar una barra deslizante a un botón en mi sitio web

[Joaco]

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]

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.

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

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

 

[ruyjol]

Si no me equivoco es un script, checate este:

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]

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.

<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]

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]

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.

<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]

Si no me equivoco es un script, checate este:

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]

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

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

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

 

[ruyjol]

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

Quedó perfecto!!

enhorabuena

 

[Nachitox]

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]

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