obecnie używam tej wtyczki: http://github.com/davist11/jQuery-One-Page-Navbootstrap.js scrollspy z animowanym przewijania
ale woleliby, aby przełączyć się za pomocą Twittera Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy
to jednak nie oferuje opcji animować ruch przewijania po kliknięciu. Jak mogę to dodać?
Powinieneś rzucić okiem na http://plugins.jquery.com/scrollTo/, powinno być łatwo połączyć z bootstrapem. Z przyjemnością przedstawię bardziej szczegółowe wyjaśnienie, jak go wdrożyć, jeśli chcesz.
Z lub bez 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>
Jest to w zasadzie przedłużeniem odpowiedzi powyżej, ale realizowane je nieco inaczej do bardziej zintegrowanego podejścia. Nie oczekuję żadnych punktów za oryginalność, ale może to może komuś pomóc.
Jak wspomniano w odpowiedzi, dodaj scrollTo() skrypt:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
W odnaleźć pliku bootstrap.js:
// SCROLLSPY CLASS DEFINITION
// ==========================
W deklaracji zmiennych, tuż pod this.process() dodać zmienna: this.scroll()
Następnie pod ScrollSpy.prototype.activate funkcja i powyżej:
// SCROLLSPY PLUGIN DEFINITION
// ===========================
dodać swoją metodę przewijania():
ScrollSpy.prototype.scroll = function (target) {
$('#spyOnThis').bind('click', 'ul li a', function(event) {
$.scrollTo(event.target.hash, 250);
});
};
Ten pracował dla mnie. Jeszcze raz dziękuję za pomocne porady powyżej.
Jest to jedna wkładka z jQuery.localScroll:
$.localScroll();
Ok chłopaki, nie trzeba dodawać żadnych dodatkowych zbędnych js wtyczek.
Dodaj to do ciała
<body data-spy="scroll" data-offset="500" data-target="#navbar">
Dodaj custom.js do tematu albo po prostu użyć innego właściwego pliku.
Dodaj to do 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);
Należy użyć <tag id="#myLink"></tag> i <a href="#myLink>
data-offset="500" w organizmie i -500 miejsca w funkcji są przesunięte miejsce zwój
To nie jest dla mnie animacją. Możesz mi pomóc? – offset
Trochę więcej pomocy byłoby wspaniale! Gdzie dokładnie umieszczam komendę scrollTo, np. '$ .scrollTo ('#' + cel ', 1000);'? – thv20
scrollspy nie obsługuje ruchu do elementu, odbywa się to natywnie przez przeglądarkę.Cała robota szpiegowska zmienia wybrany element, gdy użytkownik przewija. Oto szybkie wdrożenie scrollTo, które powinno pomóc: http://jsfiddle.net/flabbyrabbit/69z7x/ – FlabbyRabbit
Brilliant! Jedno ostatnie pytanie, czy mogę ustawić top-offset? Proszę zobaczyć tutaj w celach informacyjnych: http://jsfiddle.net/69z7x/5/ Więc tutaj będzie offset 200px. – thv20