HTML and CSS Reference
In-Depth Information
Adding
smooth-scroll
plugin
and
interaction
If you have not noticed it already, the website we are building is a single page site! All
content that is required is found on the same page. The way our site is currently de-
signed, it would mean clicking on one of the site navigation links would scroll roughly
to the section that the navigation link refers to. We would like this interaction to be
smooth. Let us use jQuery's smooth-scroll plugin to provide this.
Let us download the plugin file from the Github repository, hosted on github.com/
kswedberg/jquery-smooth-scroll .
In it, we find a minimized version of the plugin ( jquery.smooth-scroll.min.js )
that we shall open in our text editor.
Then copy all the code and paste it within the plugins.js file.
Let us add a class name js-scrollitem to let us distinguish that this element has
a script that will be used on those elements. This way, there will be a lesser chance
of accidentally deleting class names that are required for interactions prompted via
JavaScript.
Now, we shall write the code to invoke this plugin in the main.js file. Open the
main.js file in your text editor and type:
$('.js-scrollitem').smoothScroll();
This will make all the clickable links that link to sections on the same page within the
parent container with class js-scrollitem scroll smoothly with the help of the plu-
gin. If we have used our HTML5 Boilerplate defaults correctly, adding this will be more
than sufficient to get started with smooth scrolling.
Next, we would like the navigation links in the line up section to open the right-hand
side line up depending on which day was clicked on. Right now, in the following
screenshot, it simply shows the line up for the first day, and does not do anything else:
Search WWH ::




Custom Search