Estoy creando 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 uso 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 agradable efecto de desplazamiento. Necesito algo similar que se desplace a donde me vinculo. Por ejemplo, si quiero ir a un misceláneo. categoría, solo quiero poder tener <a href="#misc">Miscellaneous</a> y hacer que se desplace a esa sección de la página.
A menudo es necesario mover juntos los objetos body y html.
$('html,body').animate({ scrollTop: $("#divToBeScrolledTo").offset().top });ShiftyThomas tiene razón:
$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin.Entonces, 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.$(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; } } }); });Consulte este enlace: http://css-tricks.com/snippets/jquery/smooth-scrolling/ para ver una demostración, lo he usado antes y funciona bastante bien.
Algo como esto le permitiría hacerse cargo del clic de cada enlace interno y desplazarse a 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(); }); });