I'm currently using this plugin: http://github.com/davist11/jQuery-One-Page-Nav
but would prefer to switch to using Twitter's Bootstrap.js Scrollspy: http://twitter.github.com/bootstrap/javascript.html#scrollspy
However, this doesn't offer an option to animate the scroll movement when clicked. How can I add this?
You should take a look at http://plugins.jquery.com/scrollTo/, it should be faily simple to combine with bootstrap. I will happily give a more detailed explination on how to implement it if you would like.
$.scrollTo('#'+target', 1000);?
$.scrollTo(target, 1000, {offset:-200});
data-offset="200" to the bodyWith or without 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> 
Ok guys, no need to add any extra pointless js plugins.
Add this to body
<body data-spy="scroll" data-offset="500" data-target="#navbar"> Add custom.js to your theme or just use another proper file.
Add this to 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); Be sure you use <tag id="#myLink"></tag> and <a href="#myLink>
data-offset="500" in body and -500 places in function are to offset place of a scroll
It's a one liner with jQuery.localScroll:
$.localScroll(); This is basically an extension of the answers above but I implemented them slightly differently for a more integrated approach. I don't expect any points for originality but maybe this can help someone.
As mentioned in the answer above, add the scrollTo() script:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script> In the bootstrap.js file find:
// SCROLLSPY CLASS DEFINITION // ========================== In the variable declarations, right under this.process() add the variable:
this.scroll()
Then right under the ScrollSpy.prototype.activate function, and above:
// SCROLLSPY PLUGIN DEFINITION // =========================== add your scroll() method:
ScrollSpy.prototype.scroll = function (target) { $('#spyOnThis').bind('click', 'ul li a', function(event) { $.scrollTo(event.target.hash, 250); }); }; This worked for me. Thanks again for helpful advice up above.
