Slow your Scroll - Animate Your One Page Website Scrolling with jQuery | John Milano | Skillshare

Slow your Scroll - Animate Your One Page Website Scrolling with jQuery

John Milano, Web & Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (19m)
    • 1. Introduction

    • 2. Setup Our Project

    • 3. Connect Our Navigation

    • 4. Let's Add Our jQuery

    • 5. Changing The Active Link Highlight

    • 6. Recap Our Project


About This Class


In this class, you will learn to create Smooth Scrolling for a one-page website design.  Smooth scrolling is an animated effect when a user clicks a menu item. The website automatically scrolls to the related section rather than a jump.  This helps make an interactive feel and better user experience in your website design.

You will add a navigation menu to a website, create sections with anchor IDs and then add jQuery smooth scrolling. To further enhance the scroll effect, we will change the active highlighted menu item as the page scrolls with jQuery.

This is a great class for intermediate students who want to add interactivity to their websites.

Project Outline





  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv


Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

John Milano

Web & Graphic Designer

Hello, I'm John. I always strive to learn new techniques, skills, and ideas to better my self not just as a designer, but also as a person.  Passing on my knowledge and helping others gives me great satisfaction, so Teaching on Skillshare is a perfect opportunity to do just that. 

See full profile

Report class