Today’s post is all about enabling a very cool web design technique natively in a Twitter Bootstrap layout. We will be integrating a jQuery-based smooth scrolling effect that works responsively.
You Will Need:
- Twitter Bootstrap (I use a verison packed with HTML5 Boilerplate)
- jQuery ScrollTo
- jQuery One Page Nav
- Or just download the source for the whole shebang!
Twitter Bootstrap provides for an awesome foundation to be creative upon. This is a great example of combining resources together to create a unique product. Check out our video for the full tutorial.
The idea of a single page scrolling website is certainly not a new one. However, it can be refined by adding in a simple easing effect to smoothly scroll from section to section, rather than the usual jumping navigation. Twitter Bootstrap already comes packed with scrollspy and great CSS attributes that will make integration a snap.
Ensure this code is placed below the area where you call jQuery
Adding advanced functionality to Bootstrap can be a simple process. I would encourage you to play around with a number of plugins, and do not be limited by what is only on the Bootstrap documentation site. There are tons of great responsive resources our there to try, and Bootstrap is the perfect foundation to get started on.