Full-featured One Page Scroll Plugin With jQuery - viewScroller.js

File Size: 4.89 MB
Views Total: 2514
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Full-featured One Page Scroll Plugin With jQuery - viewScroller.js

viewScroller.js is a simple, flexible, smooth and configurable jQuery one page scroll plugin that provides a great navigation / scrolling experience for your one page website or single page web application.

Main features:

  • Customizable animations and easing effects.
  • Keyboard navigation.
  • Mouse wheel supported as well.
  • allows to make the browser fit to the closest view
  • Supports both horizontal and vertical scrolling
  • Loop mode.
  • Callback functions.
  • Lots of API and customizable options.

Basic usage:

1. Load the needed jQuery library and other required resources in the html document.

<link rel="stylesheet" href="viewScroller.css">
<script src="jquery.min.js"></script>
<script src="viewScroller.js"></script>

2. Load the jQuery easing plugin for additional easing functions.

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

3. Load the jQuery mousewheel plugin for mousewheel support.

<script src="jquery.mousewheel.min.js"></script>

4. Add all your main views to the DIV containers with the CSS class of 'mainview'. The 'vs-anchor' attribute is used to specify the unique anchor ID for each view.

<div class="mainbag">
  <div vs-anchor="firstview" class="mainview">View 1</div>
  <div vs-anchor="secondview" class="mainview">View 2</div>
  <div vs-anchor="thirdview" class="mainview">View 3</div>

5. Create anchor links to navigate between these views.

<a href="#firstview" class="vs-anchor">View 1</a>
<a href="#secondview" class="vs-anchor">View 2</a>
<a href="#thirdview" class="vs-anchor">View 3</a>

6. Create navigation buttons as follows:

<button class="vs-mainview-prev">prev mainview</button>
<button class="vs-mainview-next">next mainview</button>
<a href="#" class="vs-mainview-prev">prev mainview</a>
<a href="#" class="vs-mainview-next">next mainview</a>

7. Initialize the plugin with default options.


8. All default configuration options.

  // Animation speed of mainviews: 0 - fastest
  animSpeedMainView: 700, 

  // Animation speed of subviews: 0 - fastest
  animSpeedSubView: 700, 

  // Animation effect of mainviews change - jQuery (easing)
  animEffectMainView: 'easeInOutCubic', 

  // Animation effect of subviews change - jQuery (easing)
  animEffectSubView: 'easeInOutCubic', 

  // Animation effect of mainviews change - CSS3 (easing)
  animEffectMainViewCss3: 'ease', 

  // Animation effect of subviews change - CSS3 (easing)
  animEffectSubViewCss3: 'ease', 

  // Use keyboard to change views
  useKeyboard: true, 

  // Use scrollbar to change views
  useScrollbar: false, 

  // Change views when they are changing
  changeWhenAnim: true, 

  // Change horizontal views (mainviews) in loop mode
  loopMainViews: false, 

  // Change vertical views (subviews) in loop mode
  loopSubViews: false, 

  // Will the browser fit to the closest view (works if the useScrollbar option is true)
  fitToView: true, 

  // Time between stop scrolling and start fitting to the closest view
  timeToFit: 1000, 

  // (in px) width of the mainbag - if 0 - then width = 100% of window (in px) = .mainbag { width: XXX }
  fixedWidth: 0, 

  // (in px) a total value of the right and the left CSS margin dimensions of the .mainbag, for example: if .mainbag { left: XXX, right: YYY} then spaceMainBag = XXX + YYY
  spaceMainBag: 0, 

  // Callback which is called before views change
  beforeChange: null, 

  // Callback which is called after views change
  afterChange: null, 

  // Callback which is called before browser window resize
  beforeResize: null, 

  // Callback which is called after browser window resize
  afterResize: null 

9. API.

// setAnimSpeedMainView(value)

// setAnimSpeedSubView(value)

// setAnimEffectMainView(easing_func_name)

// setAnimEffectSubView(easing_func_name)

// setAnimEffectMainViewCss3(easing_func_name)

// setAnimEffectSubViewCss3(easing_func_name)

// setUseKeyboard(true/false)

// setUseScrollbar(true/false)

// setChangeWhenAnim(true/false)

// setLoopSubViews(true/false)

// setLoopMainViews(true/false)

// setFitToView(true/false)

// setTimeToFit(value)

// setFixedWidth(value)

// setSpaceMainBag(value)

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