Using jQuery Plugins: Smooth Scroll

Topics covered in this JavaScript & jQuery tutorial:

Linking to the plugin files, Initializing the plugin, Customizing plugin behavior with options

Exercise Preview

Exercise Overview

jQuery lets developers write a bunch of jQuery code and package it together in a way that’s easy for others to use the functionality. These are called plugins, and they are extremely useful and a huge time saver! They enable you to create complex interactivity with very little work on your part. Many jQuery plugins are free. Some cost money, but are cheap compared to the time it would take you to code the same functionality.

In this exercise, you’ll learn how to use a jQuery plugin called Smooth Scroll. It lets you create a single page site with navigation that scrolls down the page with a sliding animation.

Getting Started

1. Open your code editor if it isn’t already open.
2. Close any files you may have open.
3. For this exercise we’ll be working with the Smooth-Scroll folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
4. Open index.html from the Smooth-Scroll folder.

5. Starting on line 17, notice that each of the three links have an href that’s formatted as #id (#history, #siestacon, #contact).

   Each ID corresponds to a section lower in this page. We gave each section an ID and created a link to each of the three sections.

6. Preview index.html in a browser. This is the same page we added the random testimonial to in an earlier exercise.

7. Click the SiestaCon link near the top right of the page.

   You will be scrolled down to the SiestaCon section. While this works, it’s too abrupt. We’d like the page to slide down with an animation, so users will realize they are being scrolled down the page.

8. Leave the page open in the browser so we can come back to it later.

9. Return to index.html in your code editor.

Linking to the Plugin File

We’ve included the Smooth Scroll file in the class files, but you can also visit tinyurl.com/js-smooth-scroll to download it, read the documentation, and see examples.

As their name implies, jQuery plugins require jQuery to work. Any time we use a jQuery plugin we’ll have to link to jQuery first, before linking to the plugin.

1. To save you some time, we’ve already linked to jQuery and a main.js where we have the JavaScript code for the random testimonial (and where we’ll write our jQuery code).

   We need to link to the Smooth Scroll .js file though. On line 67, after the jQuery link, add the following code:

   <script src="js/jquery-2.1.0.min.js"></script>
   <script src="js/jquery.smooth-scroll.min.js"></script>
   <script src="js/main.js"></script> 
   

2. Save the file.

Initializing the Plugin

We’ve linked to all the files, so we’re ready to initialize the plugin.

1. From the js folder, open main.js.
2. On line 13 notice we already have jQuery’s document ready code.

3. Inside $(document).ready, add the following bold code to apply smoothScroll() to all links (a tags):

   $(document).ready(function() {
      $('a').smoothScroll();
   });
   

4. Save main.js.
5. Switch to your browser and reload index.html.

6. Click on any of the navigation buttons at the top of the page. The page should now smoothly scroll to the appropriate section of the page. Sweet!

Customizing the Plugin with Options

Most jQuery plugins are customizable. The default settings for this plugin work well, but it offers some options to modify how the plugin works. On the Smooth Scroll website tinyurl.com/js-smooth-scroll you can see the features and options available. We want to change the speed of the scroll.

1. Switch back to main.js in your code editor.

2. Inside the smoothScroll parenthesis, add {} as shown below in bold:

   $('a').smoothScroll({});
   

   NOTE: Options for jQuery plugins are listed in Object syntax. The curly braces {} will contain the list of options. If there are multiple options, they’ll be separated by commas.

3. Put the cursor inside the curly braces {} and hit Return (Mac) or Enter (Windows) to add an empty line, as shown below:

   $('a').smoothScroll({
   
   });
   

4. Add the following bold code:

   $('a').smoothScroll({
      speed: 1000
   });
   

5. Save main.js.
6. Switch to your browser and reload index.html.
7. Click on some of the navigation buttons to see that it’s scrolling very slowly. Time is generally measured in milliseconds in JavaScript. The value 1000 is telling the browser to take one second (1000 milliseconds) to scroll to a given section of the page.
8. Switch back to main.js in your code editor.

9. Change the speed to 220 as shown in bold below:

   $('a').smoothScroll({
      speed: 220
   });
   

10. Save main.js.
11. Switch to your browser and reload index.html.

12. Click on some of the navigation buttons to see that the scrolling is faster. That looks great, and we only had to write few lines of code (thanks to the plugin)!

    NOTE: If you want to refer to our final code example, go to Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Smooth-Scroll.