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

问题描述：

我想模拟滚动使用jQuery和我在技术上可以，它只是感觉非常粗糙和尴尬。如何模拟使用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; 
}

我只是想知道我怎么会做出这种流畅。请插件，谢谢。

让我们来看看整个代码。可以肯定的工作是 * { - webkit-transition：1s; transition：1s; -webkit-transition-timing-function：cubic-bezier（0.42,0,0.58,1）; transition-timing-function：cubic-bezier（0.42,0,0.58,1）;} 不是最优的，会有延迟，但会顺利地播放数字 –

答

与.animate()更换.css()并滚动到选择你想顺利：

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

答

您正在寻找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>

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

相关推荐