Created: 2014-05-18 21:43
Updated: 2016-02-15 19:33
License: gpl-2.0

One Page - v1.3.4

v1.3.4 Update

Page titles are now set with "data-op-title('your-title')" to support existing sites that cannot easily change section ids without affecting styles.

v1.3.3 Update

Prevented events from being potentially bound multiple times.

v1.3.2 Update

Fixed tolerance - now works correctly as a percentage.

v1.3.1 Update

Fixed minor issue with push state. Page url now also changes when scrolling between sections.

v1.3.0 Update

One Page now supports multiple analytics accounts. Just supply the codes as an array.

	analytics : {
		use : true,
		code : ['UA-XXXXXX']	

v1.2.0 Update

Performance fixes - Page section information is now stored at runtime. This is automatically updated on resize to account for changes in dimensions.

v1.1.0 Update

Added push state.



The markup is pretty straightforward and only requires two things:

  1. A common class to call your page sections.
  2. An id for each section - used for updating push states and analytics pageview.
<div class="page" data-op-title="about">
    <div class="container">
            <h1>Heading 1</h1>

<div class="page" data-op-title="gallery">
    <div class="container">
            <h1>Heading 2</h1>

Initialise One Page



tolerance : 0,   //Removes a percentage off each page sections offset value. Useful when you cannot trigger a page change.
speed : 500,     //Speed of scroll transition.
analytics : {
	use : false, //Setting this to true, enables One Page to push to chosen analytics account(s). Requires 'code'.
	code : null  //An array of analytics codes to push page views to. Note: analytics must be installed on page.


$('.page').onepage('init');         //Reinitialises plugin.
$('.page').onepage('update');       //Updates page section information. Ran automatically on window resize.
$('.page').onepage('info');         //Fetches info on page section details including index, offset and height.
$('.page').onepage('scroll_to', 0); //Scroll to chosen page section.
$('.page').onepage('current_page'); //Returns current page index.


on_page_change() {} //Is fired when the current page changes, optionally an argument can be passed to the function, which returns the current page index.
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more