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

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply