[SOLUCIONADO] botón de mover página hasta un div

kidinshell · #1 (**permalink**) 09/06/2016, 06:57

Hola buenas, tengo una página en la que al principio hay un botón que lleva directamente al fondo de la página donde está el botón de pago.

el problema es que lo hace de una forma brusca, y quiero que lo haga mas suave, con una animación, algo parecido a este botón de volver arriba

Código:

	jQuery.noConflict();				
	jQuery(document).ready(function() { 	
		jQuery("#arriba").hide();		
		jQuery(function () {			
			jQuery(window).scroll(function () { 
				if (jQuery(this).scrollTop() > 50) { 
					jQuery('#arriba').fadeIn();			
												    
				} else {
					jQuery('#arriba').fadeOut();   
				}
			});
			jQuery('#arriba').click(function () { 
				jQuery('body,html').animate({scrollTop:0}, 800); 
																
				return false;
			});
		});
	});

pero en lugar de que me mueva la página al inicio o al final quiero que pare en un div. Alguien conoce la forma?

Gracias

kidinshell · #2 (**permalink**) 09/06/2016, 07:49

ya he solucionado mi problema, a quien le interese le dejo el código =)

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Anclas suaves con jQuery</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			//nos desplazamos entre todos los divs
			$('a.ancla').click(function(e){
			e.preventDefault();
		    enlace  = $(this).attr('href');
		    $('html, body').animate({
		        scrollTop: $(enlace).offset().top
		    }, 1000);
			});
		});
		</script>

	</head>
	<body>
		<div id="contenedor" style="min-height: 2000px"><br />

							<div id="ancla">Este es el div número 5</div>
				<a href="#ancla" class="ancla" >Al div 5</a>

		</div>
	</body>
</html>