Question

已经添加了这个脚本，可以立即用鼠标滚轮向下滚动100％

 $(document).ready(function () {
    var divs = $('.mydiv');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

但我需要在其上添加一些东西，以便滚动看起来很流畅，我该怎么做？

Fiddle

Answer 1

<强> SOLUTION：

@ user3127499已经为您提供了工作 FIDDLE 。

他将时间从100改为1000

$('html,body').stop().animate({
    scrollTop: divs.eq(div).offset().top
}, 1000);

在这里增加了1000个延迟：

$('html,body').scrollTop(divs.eq(div).offset().top.delay(1000));

有一个插件：

在重新创建方向盘时，您将解决许多其他挑战，为什么不使用这个名为 Scroll Section 的插件。

<强> DEMO

Answer 2

您可以指定animate函数的持续时间，也可以指定缓动函数以获得不同的动画行为。

您可以在此处找到缓动功能和使用主题的说明：

jQuery Easing Plugin

div平滑滚动div

2 个答案: