jqueryを使用して滑らかなスクロールをシミュレートするにはどうすればよいですか？

Question

私はjqueryを使ってスクロールをシミュレートしようとしています。技術的にはできますが、それは本当に大まかで厄介です。

JS：

$(document).ready(function(){ 
    $(this).bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta/120 > 0) { 
      movePage(); 
     } 
    }); 
    var page1top = 0; 
    function movePage() { 
     page1top = page1top - 1; 
     // page1 is the page that i want to move up when people scroll down. 
     $('#page1').css('top': page1top + '%'); 
    } 
}); 

HTML：

<div id='container'> 
<div id='page1'></div> 
</div> 

CSS：私はちょうど私は、これがスムーズになるだろうか

#container { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    z-index: -100; 
} 

#page1 { 
    width: 100%; 
    height: 500%; 
    z-index: 0; 
} 

を思ったんだけど。プラグインはありません、ありがとう。

Answer 1

あなたがスムーズにしたい.animate()で.css()を交換し、セレクタにスクロール：あなたはjQueryのアニメーションを探している

$target = $('#someEl'); 
$('html, body').animate({ 
    scrollTop: $target.offset().top 
}, 200); 

Answer 2

。デモのためにフィドルをチェックしてください。

$('.to-target').click(function(){ 
 
    $('html, body').animate({ 
 
    scrollTop: $("#target").offset().top 
 
    }); 
 
});

.box { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.long { 
 
    background-color: aqua; 
 
} 
 

 
.short { 
 
    background-color: beige; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="boxes"> 
 
    <div class="long box"> 
 
    <button class="to-target">Go to Target</button> 
 
    </div> 
 

 
    <div id="target" class="short box"> 
 

 
    </div> 
 
</div>