actualmente estoy usando este plugin: http://github.com/davist11/jQuery-One-Page-Navbootstrap.js scrollspy con desplazamiento animada
pero preferiría cambiar al uso de Twitter Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy
Sin embargo, esto no ofrece una opción para animar el movimiento de desplazamiento cuando se hace clic. ¿Cómo puedo agregar esto?
Deberías echar un vistazo a http://plugins.jquery.com/scrollTo/, debería ser fácil de combinar con bootstrap. Con gusto le daré una explicación más detallada sobre cómo implementarlo si lo desea.
Con o sin arranque:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
<script>
$(function() {
$('#yournav').bind('click', 'ul li a', function(event) {
$.scrollTo(event.target.hash, 250);
});
});
</script>
Esta es básicamente una extensión de las respuestas anteriores pero les implementarse de forma ligeramente diferente para un enfoque más integrado. No espero ningún punto de originalidad, pero tal vez esto pueda ayudar a alguien.
Como se mencionó en la respuesta anterior, añadir el() guión scrollTo:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
En el archivo bootstrap.js hallazgo:
// SCROLLSPY CLASS DEFINITION
// ==========================
En las declaraciones de variables, justo debajo de this.process() añadir el variable: this.scroll()
Luego, justo debajo del ScrollSpy.prototype.activate función, y por encima de:
// SCROLLSPY PLUGIN DEFINITION
// ===========================
añadir su método de desplazamiento():
ScrollSpy.prototype.scroll = function (target) {
$('#spyOnThis').bind('click', 'ul li a', function(event) {
$.scrollTo(event.target.hash, 250);
});
};
Esto funcionó para mí. Gracias de nuevo por los consejos útiles arriba.
Es un chiste con jQuery.localScroll:
$.localScroll();
Ok chicos, sin necesidad de añadir ningún js plugins adicional sin sentido.
añadir esto a cuerpo
<body data-spy="scroll" data-offset="500" data-target="#navbar">
Añadir Custom.js a su tema o simplemente utilizar otro archivo adecuado.
Añadir esto a Custom.js
// strict just to keep concept of bootstrap
+function ($) {
'use strict';
// spy and scroll menu boogey
$("#navbar ul li a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault()
// store hash
var hash = this.hash
// animate
$('html, body').animate({
scrollTop: $(this.hash).offset().top -500
}, 1000, function(){
window.location.hash = hash -500
})
})
}(jQuery);
Asegúrese de usar <tag id="#myLink"></tag> y <a href="#myLink>
data-offset="500" en cuerpo y -500 lugares en función son para compensar lugar de un desplazamiento
No es animado para mí. ¿Me puedes ayudar? – offset
Un poco más de ayuda ¡sería genial! ¿Dónde coloco exactamente el comando scrollTo, p. '$ .scrollTo ('#' + target ', 1000);'? – thv20
El scrollspy no maneja el movimiento hacia el elemento, esto se hace de forma nativa por el navegador.Todo lo que scroll espía hace es cambiar el elemento seleccionado a medida que el usuario se desplaza. Aquí hay una implementación rápida de scrollTo que debería ayudar: http://jsfiddle.net/flabbyrabbit/69z7x/ – FlabbyRabbit
Brilliant! Una última pregunta, ¿puedo establecer un desplazamiento superior? Por favor, mira aquí para referencia: http://jsfiddle.net/69z7x/5/ Así que aquí habría una compensación de 200px. – thv20