Attualmente sto usando questo plugin: http://github.com/davist11/jQuery-One-Page-Navbootstrap.js scrollspy con scroll animato
ma preferirei passare ad usare Twitter Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy
Tuttavia, ciò non offre un'opzione per animare il movimento di scorrimento quando si fa clic. Come posso aggiungere questo?
Si dovrebbe dare un'occhiata a http://plugins.jquery.com/scrollTo/, dovrebbe essere semplice da combinare con il bootstrap. Darò felicemente un'esplosione più dettagliata su come implementarlo, se lo desideri.
Con o senza bootstrap:
<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>
Questo è fondamentalmente un'estensione delle risposte precedenti ma li attuato leggermente differente per un approccio più integrato. Non mi aspetto punti per originalità ma forse questo può aiutare qualcuno.
Come accennato nella risposta precedente, aggiungere il) sceneggiatura scrollTo (:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
Nel file bootstrap.js ritrovamento:
// SCROLLSPY CLASS DEFINITION
// ==========================
Nelle dichiarazioni delle variabili, proprio sotto this.process() aggiungere il variabile: this.scroll()
Poi proprio sotto il 012.la funzione, e soprattutto:
// SCROLLSPY PLUGIN DEFINITION
// ===========================
aggiungere il metodo di scorrimento():
ScrollSpy.prototype.scroll = function (target) {
$('#spyOnThis').bind('click', 'ul li a', function(event) {
$.scrollTo(event.target.hash, 250);
});
};
Questo ha funzionato per me. Grazie ancora per i consigli utili di cui sopra.
E 'un uno di linea con jQuery.localScroll:
$.localScroll();
Ok ragazzi, non c'è bisogno di aggiungere qualsiasi JS plugin aggiuntivi inutili.
Aggiungi questo al corpo
<body data-spy="scroll" data-offset="500" data-target="#navbar">
Aggiungi custom.js al vostro tema o semplicemente utilizzare un altro file corretto.
Aggiungi questo per 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);
Assicuratevi di utilizzare <tag id="#myLink"></tag> e <a href="#myLink>
data-offset="500" nel corpo e -500 posti in funzione sono per compensare posto di un rotolo
Non è animato per me. Mi potete aiutare? – offset
Un po 'più di aiuto sarebbe bello! Dove esattamente metto il comando scrollTo, ad es. '$ .scrollTo ('#' + target ', 1000);'? – thv20
Lo scrollspy non gestisce il movimento dell'elemento, questo viene fatto in modo nativo dal browser.Tutte le spie di scorrimento fa è modificare l'elemento selezionato mentre l'utente scorre. Ecco una rapida implementazione di scrollTo che dovrebbe aiutare: http://jsfiddle.net/flabbyrabbit/69z7x/ – FlabbyRabbit
Brillante! Un'ultima domanda, posso impostare un offset superiore? Si prega di vedere qui per riferimento: http://jsfiddle.net/69z7x/5/ Quindi qui ci sarebbe un offset 200px. – thv20