Twitter Bootstrap ScrollSpy SideNav Smooth Scrolling Plugin

To hook in Ariel Flesler’s jquery.scrollTo-min.js plugin to your Twitter Bootstrap SideNav Bar, and give your menu some smooth scrolling instead of jumpiness:

[See demo:]

<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() {

            $('.bs-docs-sidenav').affix({
                offset: {
                    top: function () { return $window.width() <= 980 ? 90 : 10 }
                    , bottom: 270
                }
            });

		    $('ul.bs-docs-sidenav li a').bind('click', function(e) {
		        e.preventDefault();
		        target = this.hash;
		        console.log(target);
		        $.scrollTo(target, 1000);
		   });

});
</script>

If smooth scrolling doesn’t work, make sure you CHECK THE PATH you are specifying and that you got it down correctly and that it exists. I made a small mistake and listed the path with my classes in the wrong order of ul > li > a. For twitter bootstrap, it’s the above path, else it can be any generic one as below:
$(‘**.your-class-here** li a’).bind

Leave a Reply