Question

旨在执行与this类似的操作，当您向下滚动时页面会跳转到页面上的锚点。我不是JQuery或JS的专家（后端语言PHP和MySQL是我喜欢的领域）我抓了几个脚本并把它们组合在一起。页面上会有三个锚点，所以当你向下滚动时它意味着跳到下一个锚点，当你向上滚动时跳到下一个锚点。但是，当它滚动到第二个时，即使我还没有滚动，它也会一直滚过它。这是脚本：

var section = 1;

function scrollToAnchor(variable){
    var aTag = $("a[name='"+ variable +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$(function(){
   //Keep track of last scroll
   var lastScroll = 0;
   $(window).scroll(function(event){
       //Sets the current scroll position
       var st = $(this).scrollTop();
       //Determines up-or-down scrolling
       if (st > lastScroll && section < 3){
          //Going down
           section = section + 1;
           scrollToAnchor('section'+section);
           lastScroll = st;
       } else if(st < lastScroll && section > 1){
          //Going up
           section = section - 1;
           scrollToAnchor('section'+section);
           lastScroll = st;
       }
       //Updates scroll position
       lastScroll = st;
   });
});

小提琴：http://jsfiddle.net/tBN64/4/

Answer 1

原因是当scroll scroll event被触发，然后animate函数滚动到元素，但该动画滚动本身将再次触发滚动事件，导致一个循环。

我建议你尝试不同的方法。例如，您可以捕捉鼠标滚轮方向并使用它来滚动到下一个元素。

使用jQuery Mousewheel插件https://github.com/brandonaaron/jquery-mousewheel

的示例

var current_section = 1;
$(window).mousewheel(function (event, delta) {
    if (delta > 0) {
        current_section = current_section - 1; //up
        $('body, html').stop().animate({
            scrollTop: $('a[name="section' + current_section + '"]').offset().top
        }, 'slow');
    } else if (delta < 0) {
        current_section = current_section + 1; //down
        $('body, html').stop().animate({
            scrollTop: $('a[name="section' + current_section + '"]').offset().top
        }, 'slow');
    }
    return false;
});

小提琴：http://jsfiddle.net/tBN64/6/（上面的代码在最后）

注意：此代码不会验证是否存在下一个section，因此如果滚动到太多，则会引发错误。您需要确保下一个元素存在/如果它没有动画它。（有关错误，请参阅控制台，通常是在浏览器中按F12键）

Answer 2

您的脚本中存在更多问题。首先 - 我认为您需要阻止滚动事件的默认行为，否则它将滚动，而您不希望这样，因为您想要自己动画滚动。

event.preventDefault()可以提供帮助，并且在功能结束时也可以return false;。

然后问题是，滚动事件不是一次触发，而是一次鼠标滚动多次。你以某种方式需要防止这种情况，否则会发生，滚动开始，然后动画开始，但滚动仍然继续，它通过第2节，并一次又一次地被触发..

也许这个脚本可以提供帮助 - 它会产生一个新事件scrollStopped：

jQuery - bind event on Scroll Stop

一般来说，我建议你去搜索一个执行这种行为的脚本，因为自己编程可以带来很多其他用户过去在其插件中修复过的问题。

Answer 3

我发现了一些使用Spokey's answer的错误，当页面滚动太多我们得到了一个js错误，所以我添加了一些检查：如果该部分是最后一个，那么我们不需要提高它数字和向上滚动相同。

我得到了这段代码，但是对于部分而不是锚点改变了这一点：

var current_section = 1;
var min_section = 1;
var max_section = $("section[name]").length;
$(window).mousewheel(function (event, delta) {
    if (delta > 0) {
        current_section = current_section - 1; //up
        if (current_section < min_section) current_section = min_section;
        $('body, html').stop().animate({
            scrollTop: $('section[name="section' + current_section + '"]').offset().top - 100
        }, 'slow');
    } else if (delta < 0) {
        current_section = current_section + 1; //down
        if (current_section > max_section) current_section = max_section;
        $('body, html').stop().animate({
            scrollTop: $('section[name="section' + current_section + '"]').offset().top - 100
        }, 'slow');
    }
    return false;
});

$('body, html').scroll(function(){ return false; }); // allow no scrolling

JQuery跳转到Scroll上的Anchor

3 个答案: