Smooth Vertical Page Scroll Navigation with jQuery

File Size: 11.7 KB
Views Total: 5009
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Vertical Page Scroll Navigation with jQuery

A jQuery plugin which uses custom images as a sticky vertical navigation for your long one page scrolling website. The users can navigate smoothly between your page sections by clicking on the navigation images.

How to use it:

1. Download and load the jQuery Vertical Navigation plugin after you've loaded jQuery JavaScript library.

<script src="//"></script>
<script src="js/vertical_navigation.js"></script>

2. Add content sections to your webpage.

<div id="section1" class="section">
  Section 1

<div id="section2" class="section">
  Section 2

<div id="section3" class="section">
  Section 3

3. Create a vertical navigation with anchor links pointing to the corresponding sections.

<div id="menu">
      <a href="#section1" class="item_menu">
        <img src="./img/1b.png" alt="1">
      <a href="#section2" class="item_menu">
        <img src="./img/2.png" alt="2">
      <a href="#section3" class="item_menu">
        <img src="./img/3.png" alt="3">

4. Initialize the plugin to active the vertical navigation.


5. Style the vertical navigation and make it sticky on the right side of the screen.

#menu {
  position: fixed;
  right: 0;
  top: 45%;
  width: 8em;
  margin-top: -6.5em;
  z-index: 2;
  margin-right: 2rem;

6. Make the vertical scrolling effect more smooth using CSS3 transitions.

.section {
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;

7. Specify the image folder.

  path_img: "./img/"

This awesome jQuery plugin is developed by marti1125. For more Advanced Usages, please check the demo page or visit the official website.