Cross-browser One Page Scroll Plugin With jQuery - singleFull.js

Just another jQuery implementation of the popular, smooth one page scrolling effect for your fullscreen pages or single page web application.

Features:

• Supports all modern browsers and even IE 7/8.
• Auto scrolls back to the first section as you reach the bottom.
• Supports mouse wheel.
• Side navigation.
• Mobile friendly and touch swipe supported.

How to use it:

1. The html structure to create a fullscreen page with a vertical side navigation.

<div id="single">
  <div data-target="home" id="home">
      Home
  </div>
  <div data-target="about" id="about">
      About
  </div>
  <div data-target="examples" id="examples">
      Examples
  </div>
  <div data-target="contact" id="contact">
      Contact
  </div>
  <!-- vertical nav -->
  <div id="fp-nav" class="right" style="margin-top: -43.5px;">
    <ul>
      <li><a href="#" class="active" data-anchor="home"><span></span></a>
        <div class="fp-tooltip right">Home</div>
      </li>
      <li><a href="#"  data-anchor="about"><span></span></a>
        <div class="fp-tooltip right">About</div>
      </li>
      <li><a href="#"  data-anchor="examples"><span></span></a>
        <div class="fp-tooltip right">Examples</div>
      </li>
      <li><a href="#"  data-anchor="contact"><span></span></a>
        <div class="fp-tooltip right">Contact</div>
      </li>
    </ul>
  </div>
</div>

2. Place jQuery library, jQuery easing plugin and the jQuery singleFull.js script at the end of the document so the page loads faster.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.easing.min.js"></script>
<script src="js/jquery.singlefull.js"></script>

3. Initialize the plugin.

$("#single").singlefull();

4. Style the fullscreen page and its side navigation.

* {
  padding: 0;
  margin: 0;
}

div[data-target] {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

div[data-target] > div {
  text-align: center;
  position: relative;
}

#fp-nav {
  position: fixed;
  z-index: 100;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
}

#fp-nav.right { right: 17px; }

#fp-nav.left { left: 17px; }

.fp-slidesNav {
  position: absolute;
  z-index: 4;
  left: 50%;
  opacity: 1;
}

.fp-slidesNav.bottom { bottom: 17px; }

.fp-slidesNav.top { top: 17px; }

#fp-nav ul, .fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

.fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
  display: inline-block;
}

#fp-nav ul li a, .fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #333;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}

#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav.fp-show-active a.active + .fp-tooltip {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav ul li .fp-tooltip.right { right: 20px; }

#fp-nav ul li .fp-tooltip.left { left: 20px; }

.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell { height: auto !important; }

5. Plugin's options and defaults.

$("#single").singlefull({

  // scrolling speed
  scrollingSpeed: 1000,

  // easing effect
  easing: "easeOutExpo",

  // data attribute for content sections
  section: 'data-target',

  // data attribute for anchor links
  anchor: 'data-anchor',

  // enable keyboard navigation
  keyboard: true, 

  // endless looping
  loopScroll: true, 
  loopTop: true, 
  loopBottom: true, 

  // side navigation options
  navigation: true, 
  navigationPosition: 'right', 

  // suffixes for responsive images
  sufixes: {
    smallest: "-smallest",
    small: "-small",
    medium: "-medium",
    normal: "" // Leave blank for no prefix
  }
  
});

---

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