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.
View The Demo | Download the Source
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.
To get started I recommend downloading the jQuery one page nav plugin by Trevor Davis. Next we can simply add the proper files into our project. Into your plugins javascript file add the jQuery.scrollTo.js content first, then proceed with adding the jquery.nav.js content. Once added we are almost done with our JavaScript. Simply add the code below to the bottom of your html page to activate the scripts.
<script type="text/javascript">// <![CDATA[
$('#top-nav').onePageNav({
currentClass: 'active',
changeHash: true,
scrollSpeed: 1200
});
// ]]></script>
Ensure this code is placed below the area where you call jQuery
The JavaScript above features the primary call to our navigation while activating the “One Page Nav” plugin. In this case we have used a “ul” with an id of “top-nav”. But feel free to use any id that you would prefer, just ensure this jQuery call is adjusted properly.
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.
Excellent post, thank you. attachment_id seems to be broken on the ‘Download the Source’ href.
Nice tutorial,
But not very handy on mobile phones and specially on the iPad it makes not much sense.
When you scroll to “Portfolio” how do you get back!?
Maybe jQuery scroll to top!
Hey Brock! Awesome article. We built a single-page scrolling site for our company here: http://drifty.co/
Basically, we just used standard jQuery animations for the scrolling, which I found to be a bit easier than using the common scrolling plugins for jQuery. You can see the code I used at the bottom of that if you view the source.
We also did the same on our Bootstrap builder product Jetstrap: http://jetstrap.com/
It’s a simple but cool effect, thanks for sharing your solution!
Hello Brock,
I’ve tried using this and it works great until i try changing the offset (I want to stop scrolling 40 px from the to of the section. This appears to work at first then does a terrible jump back to 0px offest which looks horrible. Do you know how to get the offset to work with your download?
Many thanks!
Gr8 work Brock,
I liked the idea of having single page for entire site. I have have added you on my blog list.
Keep up the good work.
Thanks