Smooth Full Page Scroller Plugin For jQuery - goMover

File Size: 4.6 KB
Views Total: 2484
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Full Page Scroller Plugin For jQuery - goMover

goMover is a simple and easy jQuery plugin that helps you create a one page scrolling website with smooth sliding effects. The target container will snap to the top of the window when the visitor clicks on an anchor link. 

How to use it:

1. Create the page layout as follows.

<div class="section-container">
  <div class="section-row" id="sec1" >
    <div class="section">Section 1</div>
  </div>
  <div class="section-row" id="sec2">
    <div class="section">Section 2</div>
  </div>
  <div class="section-row" id="sec3">
    <div class="section">Section 3</div>
  </div>
  ...
</div>

2. Create a floating menu which allows the visitors to navigate between sections.

<div class="float-menu">
  <ul>
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
    <li><a href="#sec3">Section 3</a></li>
  </ul>
</div>

3. The required CSS for the containers & menus.

html,
body,
ul,
li {
  margin: 0;
  padding: 0;
  overflow: auto;
  color: #fff;
}

.section-container {
  display: block;
  width: 100%;
}

.section-container .section-row {
  position: absolute;
  display: table;
  width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

.section-container .section-row .section {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  font-size: 3em;
  font-family: Arial;
}

.section-container #sec1 {
  top: 0px;
  background: #1abc9c;
}

.section-container #sec2 {
  top: 100%;
  background: #3498db;
}

.section-container #sec3 {
  top: 200%;
  background: #e74c3c;
}

.float-menu {
  position: fixed;
  z-index: 200;
  left: 20px;
  top: 220px;
}

.float-menu a {
  font-size: 14px;
  font-weight: bold;
  color: #ecf0f1;
}

.float-menu a.active { font-size: 30px; }

4. Load the jQuery library and the jQuery goMover plugin at the bottom of the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.goMover.js"></script> 

5. The Javascript to enable the plugin.

$(document).ready(function($) {
  $('.float-menu a').goMover();	
});

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