Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

This little fix makes the script work in Internet Explorer 8. It uses the jQuery animate function and the CSS top position instead of the CSS3 transform. To get this working you do need Modernizr, but you can also use a few lines of jQuery to detect the browser.

I can't get this plugin to work on IE8/IE9 even with modernizr. (Even the demo doesn't work) Weirdly enough, the version v1 works...

EDIT: The code is looking for the class "ie8" in the html. Even if modernizr adds this class, it still won't work in IE9.

My fix: Look for the "no-csstransforms3d" class instead.

When viewing your demo page on a mobile device, it seems that onepage-scroll is disabled (no little indicators on the right and there is no auto-scrolling). How to get this behaviour?

Great plugin by the way :)

How I make scroll to section 2 when click button (Section 1)?

$('.reload.btn').bind('click', function(){
     $(".main").moveTo(2);
});

This not work.

If you want horizontal scroll just add in options

direction: 'horizontal'

For example:

$('.main').onepage_scroll({
    sectionContainer: "section",
    animationTime: 1000,
    pagination: false,
    updateURL: false,
    loop: true,
    direction: 'horizontal'
})

There is a solution https://github.com/peachananr/onepage-scroll/pull/39 , but it doesn`t support newest features of onepage-scroll plugin (such as loop option etc.).

I hope that`s userful :)

Если вы хотите использовать горизонтальный скролл вместо вертикального - просто добавьте при инициализации плагина опцию

direction: 'horizontal'

Например

$('.main').onepage_scroll({
    sectionContainer: "section",
    animationTime: 1000,
    pagination: false,
    updateURL: false,
    loop: true,
    direction: 'horizontal'
})

За основу было взято решение https://github.com/peachananr/onepage-scroll/pull/39 , но оно уже довольно старое и не поддерживает новые фишки плагина.

Надеюсь мое "улучшение" окажется кому-то полезным :)

the website was working normally as well as all ahrefs, but as soon as i added the onepage-scroll, all a hrefs stopped working and are not clickable anymore.. I don't even see the cursor of the mouse change to a hand anymore..

Any idea??

The source code does not include the license. Thus, it may be possible to "download for free" this script, but it is not possible to use it or redistribute it on one's web site.

I have a click event to call the moveDown() but the console shows me

moveDown is not defined i have the last version jquery-onepage-scroll.js v1.3.1 and* jQuery JavaScript Library v1.11.1

$('.arrow-down').click(function() {
   $("#fullpage").moveDown();
});

The currentbower.json file is referencing an out dated version of this repo.

{
  "name": "onepage-scroll",
  "version": "1.2.2",
  "author": "Pete R",
  "main": [
    "jquery.onepage-scroll.js",
    "onepage-scroll.css"
  ],
  "ignore": [
    "Demo",
    "README.md"
  ],
  "dependencies": {
    "jquery": "~1.10.2"
  }
}

I'm seeing a strange issue on my app where by the index value passed to the before and after callbacks is delayed. ie. When you scroll from #1 to #2 then then the console log of index shows 1. then on scrolling back up to #1 the console log shows 2.

You can see and example here and I've kept the console log values in there: http://chew-lv.herokuapp.com/

onepager is scrolling to blank site

go to http://www.thepetedesign.com/demos/onepage_scroll_demo.html#0 and refresh the site to see the bug.

fix: if(window.location.hash != "" && window.location.hash != "#0" && window.location.hash != "#1") {

The URL is https://chromestatus.com/feature/6662647093133312

Even your demo site is getting this error in Chrome browser.

pure js version is the same.

I get this error

Uncaught ReferenceError: total is not defined
    at s.fn.init.e.fn.onepage_scroll (jquery.onepage-scroll.min.js?ver=1.0.186:1)
    at onepage.js?ver=1.0.186:3
    at onepage.js?ver=1.0.186:15

And it gets me to this function

     $.fn.onepage_scroll = function(options){
    var settings = $.extend({}, defaults, options),
        el = $(this),
        sections = $(settings.sectionContainer)
        total = sections.length,
        status = "off",
        topPos = 0,
        leftPos = 0,
        lastAnimation = 0,
        quietPeriod = 500,
        paginationList = "";
        ...

What should I do?

Loving this plugin so far, but I have an issue. I have some sections that before installing the plugin had an auto max height which renders to about 50vh on desktop, but now with the plugin those sections have a whole lotta whitespace. Is there a way to fix this?

Edit: Am also having overflow issues on mobile so basically my question is: How do I use this plugin with auto max height sections

Hi!

I want to use this in a theme I created for our company's online (hosted in Atlassian Confluence) product documentation. Where do I specify the license attribution and links etc.? What I have in the footer is what links to the company's license, etc.

-Amit