如何使用 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 動畫。 檢查小提琴進行演示。

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

Answer 2

將.css()替換為.animate()並平滑滾動到您想要的選擇器：

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