As we said before, we can use a slide to the section
code to create our single page website navigation, so that when the user clicks in the menu, the page scrolls to the beginning of that section. To accomplish that effect, we will be using a jQuery plugin called PageScroller
, available at http://pagescroller.com/. There are two versions: Pro and Lite. For this exercise, the Lite version will be enough, as we only need the minimum functionality. The way we're going to implement this is extremely easy as well, but if you're looking for more options, you can check the plugin readme
file and the website.
First of all, we'll need to load the JavaScript files needed for this. After unpacking the plugin, copy and paste the jquery.pagescroller.lite.js
file into your js
folder. We will also need jQuery for this, but we will load it from the Content Delivery Network (CDN) from an external path. So, include these two lines in your <head>
element, ideally before the...