jQuery 100％垂直スクロール（スライドスクロール）

Question

私はこの目的のために多くの偉大なプラグインがあることを知っていますが、これは私がたくさん使用したいと思うので、私はそれがどのように完了したか見たいです！

HTML：：

<div id="section1"> 
<div id="section2"> 

CSS：

#section1{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#section2{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 100%; 
    left: 0; 
} 

#section1:active{ 
    position: fixed; 
} 

#section2:active{ 
    position: fixed; 
} 

のjQuery：

$(".wrapper").on('mousewheel DOMMouseScroll', function (event) { 
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { 
    $('.slide-1').addClass('active'); 
} else { 
    $('.slide-2').addClass('active'); 
} 
}); 

私が勉強したいあなたはそれ最善を尽くしどのように私はあなたがそれをこの方法で行うことができます知っています方法。私は速く書いたコードですみません。

Answer 1

これは実際には最も一般的にはデルタカウンタで行われます。 jQueryマウスホイールのようなライブラリが必要になります。それからあなたは "マウスホイール"と耳を傾けることができるイベントがあります。あなたは、基本的なロジックは次のようになりますことをしていたら（下の赤いウィンドウにスクロール）：あなたがこれを持っていたら

var deltaCounter = 0, 
 
\t oldDelta = 0, 
 
\t scrollDirection = 0, 
 
\t threshold = 250; 
 
$("html").on('mousewheel', function(e) { 
 
\t e.preventDefault(); 
 
\t deltaCounter += e.deltaY; 
 
\t if (Math.abs(deltaCounter) >= threshold) { 
 
\t \t deltaCounter = 0; 
 
\t \t if (scrollDirection === 0) { 
 
\t \t \t next(); 
 
\t \t } else { 
 
\t \t \t prev(); 
 
\t \t } 
 
\t } 
 
\t if (oldDelta < deltaCounter) { 
 
\t \t scrollDirection = 1; 
 
\t } else { 
 
\t \t scrollDirection = 0; 
 
\t } 
 
\t oldDelta = deltaCounter; 
 
}); 
 

 
function next(){ 
 
\t console.log("NEXT PAGE"); 
 
} 
 

 
function prev(){ 
 
\t console.log("PREV PAGE"); 
 
}

body{ 
 
    background-color:rgba(255,200,200,0.3); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

が、あなたはあなたが起こるしたいものは何でも適用することができます」 「次のページ」および「前のページ」の状況を示す。 thresholdを調整することで、「ページ」間にどれだけのスクロールが必要になるかが決まります。

Answer 2

あなただけ

#buttonは何でもすることができ

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#elementtoScrollToID").offset().top 
    }, 2000); 
}); 

ような何かを試みることができます。基本的に#buttonをクリックすると、#elementtoScrollToIDの先頭にアニメーションが表示されます。