Question

我是脚本新手。

好的，所以我创建了单页网站（ alturl.com/3ovx5 ），其中有几个DIV，100％宽度/高度堆叠在一起。顶部的固定按钮为页面设置动画以滚动到所需的顶部DIV，然后通过检测scrollTop突出显示该按钮。

现在我正在尝试添加类似于http://www.morethanamap.com/developer-stories/ 的功能。此页面会响应鼠标滚动并自动滚动到下一个/上一个DIV，这超出了我的联盟。

使用此code我尝试了以下内容：

$(document).ready(function() { var top0 = $('#page0').position().top; var top1 = $('#page1').position().top; // and so on var oldst = 0; // for OLD-scrollTop $(document).bind('scroll', function () { var newst = $(this).scrollTop(); // NEW-scrollTop if (newst > oldst) { // user scrolls down if (newst < top1) { $('body').animate({scrollTop: top1}, 435); } else if (newst > top1 && newst < top2) { $('body').animate({scrollTop: top2}, 435); } else if (newst > top2 && newst < top3) { $('body').animate({scrollTop: top3}, 435); } else if (newst > top6 && newst < top7) { $('body').animate({scrollTop: top7}, 435); } // and so on } else { // user scrolls up if (newst > top1 && newst < top2) { $('body').animate({scrollTop: top0}, 435); } else if (newst > top2 && newst < top3) { $('body').animate({scrollTop: top1}, 435); } else if (newst > top7 || newst = top7) { $('body').animate({scrollTop: top6}, 435); } // and so on } oldst = newst; //update OLD-scrollTop }); });

登陆DIV滚动好了，但之后滚动停止工作，而页面开始上下跳跃。我猜这个论点可能会有冲突。因此，我更改参数以检测突出显示的（锚定ID为一/二/三....）按钮，然后相应地向上/向下滚动。

新论点变为：

if (newst > oldst) { if (newst < top1) { $('html, body').animate({scrollTop: top1}, 435); } else if ($('#one').hasClass('selected')) { $('body').animate({scrollTop: top2}, 435); } else if ($('#two').hasClass('selected')) { $('body').animate({scrollTop: top3}, 435); } else if ($('#three').hasClass('selected')) { $('body').animate({scrollTop: top4}, 435); } // and so on }

相同的结果。滚动失败一次。

以下是第一个检测scrollTop的演示（ alturl.com/rizw3 ）。
这是第二个演示（ alturl.com/44wp4 ），可以检测突出显示的按钮。

HERE是一个测试（alturl.com/v6sr7） ，它使用alert-messages来显示参数（使用第一个演示中的代码）工作正常。然而，我想要做的是在完成后禁用滚动条，它应该滚动到上面的DIV，或者下面的DIV（如google-maps示例）。

希望有更好的方法来解决这个问题吗？：/

感谢加载！

Answer 1

我看到你要做的事情，把它固定在滚动的固定点上。

然后单独使用scroll()函数不能顺利处理它，因为拖动滚动条可能是一个大问题（它会是跳跃/跳跃），我建议你只使用鼠标滚轮事件进行锚定。

在这个解决方案中，我们使用'锚定'类作为指标。

$(document).on('mousewheel DOMMouseScroll', function(e) {
    var $anchored = $('div.anchored'), 
         delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;   

    if(delta < 0) { 
        //mousewheel down
        $next = $anchored.next();

        if($next.length){
            $('body, html').stop().animate({scrollTop:$next.offset().top},'slow');     
        } 
    }else{ 
        //mousewheel up
        $prev = $anchored.prev();

        if($prev.length){
            $('body, html').stop().animate({scrollTop:$prev.offset().top},'slow');    
        }
    }
    e.preventDefault();
});

现在，如果用户通过拖动滚动条进行滚动，您还需要将“锚定”类指示器移动到视口中最明显的<div>。

$(window).scroll(function(){
var st = $(this).scrollTop();

$('div').each(function(){
    var offset = $(this).offset();
    if(st >= offset.top && st < offset.top + $(this).outerHeight()){
        $(this).addClass('anchored');
    }else{
        $(this).removeClass('anchored');
    }
});

});

请参阅此jsfiddle。

（自动）向上/向下滚动到DivTop

1 个答案: