jQuery Desplácese a Div

Question

Estoy haciendo una página de Preguntas frecuentes y tengo botones en la parte superior para saltar a una categoría (salta a la etiqueta p que utilizo como etiqueta de categoría, por ejemplo <p id="general"> para mi categoría general). En lugar de saltar directamente a la categoría, quiero agregar un efecto de desplazamiento. Quiero algo como http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm que se desplaza a la parte deseada de mi página. Ese enlace es un script que va a la parte superior de la página con un bonito efecto de desplazamiento. Necesito algo similar que se desplazará a donde me enlace. Por ejemplo, si quiero ir a un misc. categoría, solo quiero poder tener <a href="#misc">Miscellaneous</a> y hacer que se desplace a esa sección de la página.

Answer 1

$(function() { 
    $('a[href*=#]:not([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) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Comprobar este enlace: http://css-tricks.com/snippets/jquery/smooth-scrolling/ para una demostración, lo he usado antes y funciona bastante bien.

Answer 2

si el elemento de enlace es:

<a id="misc" href="#misc">Miscellaneous</a> 

y la categoría Varios está limitada por algo como:

<p id="miscCategory" name="misc">....</p> 

puede utilizar jQuery para hacer el efecto deseado:

<script type="text/javascript"> 
    $("#misc").click(function() { 
    $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top}); 
    }); 
</script> 

por lo que recuerdo correctamente ... (aunque no lo he probado y lo escribí de memoria)

Answer 3

Algo como esto permitiría que se toma sobre el clic de cada enlace interno y desplazarse hasta la posición del marcador correspondiente:

$(function(){ 
    $('a[href^=#]').click(function(e){ 
    var name = $(this).attr('href').substr(1); 
    var pos = $('a[name='+name+']').offset(); 
    $('body').animate({ scrollTop: pos.top }); 
    e.preventDefault(); 
    }); 
}); 

Answer 4

sólo pudiera utilizar la función de posición de jQuery para obtener coordenadas de su div, a continuación, utilizar desplazamiento javascript:

var position = $("div").position(); 
scroll(0,position.top); 

Answer 5

es menudo requerida para mover el cuerpo y los objetos juntos html.

$('html,body').animate({ 
    scrollTop: $("#divToBeScrolledTo").offset().top 
}); 

ShiftyThomas es el adecuado:

$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin. 

Así que para aumentar el uso del margen:

$("#divToBeScrolledTo").offset().top - 10 // -10 (pixels) would increase the margin between the top of your window and your element. 

Answer 6

me encontré con el mismo. Vimos un ejemplo que utiliza este: https://github.com/flesler/jquery.scrollTo

lo uso como sigue:

$('#arrow_back').click(function() { 
    $.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' }); 
}); 

solución limpia. ¡Funciona para mi!

Answer 7

El siguiente script es una solución genérica que funciona para mí. Se basa en ideas extraídas de este y otros hilos.

Cuando se hace clic en un enlace con un atributo href que comienza con "#", se desplaza la página sin problemas al div indicado. Donde solo está presente el "#", se desplaza suavemente hacia la parte superior de la página.

$('a[href^=#]').click(function(){ 
    event.preventDefault(); 
    var target = $(this).attr('href'); 
    if (target == '#') 
     $('html, body').animate({scrollTop : 0}, 600); 
    else 
     $('html, body').animate({ 
     scrollTop: $(target).offset().top - 100 
    }, 600); 
}); 

Por ejemplo, cuando el código anterior está presente, hacer clic en un enlace con la etiqueta <a href="#"> se desplaza a la parte superior de la página a la velocidad 600. Al hacer clic en un enlace con la etiqueta <a href="#mydiv"> desplaza a 100px anteriormente <div id="mydiv"> a velocidad 600 . Siéntase libre de cambiar estos números.

Espero que ayude!

Answer 8

También puede utilizar 'nombre' en lugar de 'href' para una dirección URL más limpio:

$('a[name^=#]').click(function(){ 
    var target = $(this).attr('name'); 
    if (target == '#') 
     $('html, body').animate({scrollTop : 0}, 600); 
    else 
     $('html, body').animate({ 
     scrollTop: $(target).offset().top - 100 
    }, 600); 
});