-1

I want to scroll a page to 2000 offset in one move of mouse wheel, like the apple does http://www.apple.com/iphone-5s/

For more information, I'm using a skrollr plugin.

All I want is to scroll a whole page to new section.

This Site resembles same as mine.

Use this as a reference, I want to scroll to "O Estúdio" in one scroll.

Awesomestvi
  • 783
  • 1
  • 5
  • 14
  • Please provide some code in a JSFiddle that you've tried. – speak Aug 01 '14 at 11:57
  • 1
    possible duplicate of [How To Scroll down 100% with Mousewheel at once ? - jquery](http://stackoverflow.com/questions/17273719/how-to-scroll-down-100-with-mousewheel-at-once-jquery) – Casey Falk Aug 01 '14 at 12:09
  • Some **nicer example**: [Control page scroll animation with mousewheel](http://stackoverflow.com/questions/11171828/control-page-scroll-animation-with-mousewheel) – Roko C. Buljan Aug 17 '16 at 12:16

2 Answers2

3

Demo

html

<div class="test" style="text-align:center; color:green">Test Page</div>
<div class="test" style="background-color: #111">Page 1</div>
<div class="test" style="background-color: #222">Page 2</div>
<div class="test" style="background-color: #333">Page 3</div>
<div class="test" style="background-color: #444">Page 4</div>

js

$(document).ready(function () {
    var divs = $('.test');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

from : How To Scroll down 100% with Mousewheel at once ? - jquery

Community
  • 1
  • 1
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
  • 1
    If this is a duplicate, perhaps it would be better to mark it as a duplicate? – Casey Falk Aug 01 '14 at 12:05
  • @CaseyFalk : you right, I just thought of doing it so. Anyways I provided the link to the answer. Still I mark it as duplicate. Thanks! – 4dgaurav Aug 01 '14 at 12:08
2

use this plugin

<div class="main">
<section>...</section>
<section>...</section>
...

$(".main").onepage_scroll();

Link Demo and download

HDT
  • 2,017
  • 20
  • 32