javascript - 如何使用 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

您正在寻找 jquery animate。检查 fiddle 进行演示。

$('.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>