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);

如何使用jquery模拟平滑滚动？

2 个答案: