jQuery平滑滚动到锚点

我写了一个相当简单的平滑滚动功能，使用jQuery mousewheel扩展名，并没有以前的经验$.mousewheel我遇到了一个问题。jQuery平滑滚动到锚点

基本上，一旦south delta被调用时，我请使用scrollTop一个$.animate函数一类.anchor

HTML的（简化的问题）：

<div id="static-section" class="anchor"></div> <!-- width: 100%; height: 258px --> 
<div id="alt-section" class="anchor"></div> <!-- width: 100%; height: 346px -->

的jQuery：

$(document).ready(function() { 
    $("body").mousewheel(function(event, delta, deltaX, deltaY) { 
     if(delta > 0) { 
      console.log("North: " + delta); 
     } 

     else if(delta < 0) { 
      console.log("South: " + delta); 
      // ANIMATE TO ANCHOR FUNCTION 
      $("html,body").animate({scrollTop: $(".anchor").offset().top}, "slow"); 
     } 

     return false; 
    }); 
});

所以：我的问题是，它只是对动画的.anchor的第一实例（这将是#static-section）我试图做scrollTop: $(".anchor").next().top这显然是行不通的，但没有出现任何错误，但它仍然只是动画播放至第一实例。我的第一个猜测是使用for循环，并且我尝试了它，但它不起作用（也没有任何错误）。我以前从未真正使用过for循环，所以我不确定是否或者不是我所做的是正确的。任何帮助将非常感激！

注意：jsFiddle（与我的网站代码相同）不描绘出我已经完成的相同的事情，所以没有现场演示可用。如果你们需要它，我会根据请求提供网址。 :-)

来源

2013-10-27 Jace Cotton

将不同的类名称为2个锚 - '.anchor-top'和'锚middle'-也许，帮助吗？ –

@HenryFlorence只有当我能够想出如何每次'delta'往南时迭代它。切换目标类是我遇到的问题... –

有可能使用jQuery'.next（）'方法遍历锚选择器，类似于：http://jsfiddle.net/mSVZ2/ 3/ –

像这样的事情会逐步通过.anchor标签：使用

$(document).ready(function() { 
    var $anchor = $('.anchor'); 
    $("body").mousewheel(function(event, delta, deltaX, deltaY) { 
     if(delta > 0) { 
      console.log("North: " + delta); 
     } 

     else if(delta < 0) { 
      console.log("South: " + delta); 
      // ANIMATE TO ANCHOR FUNCTION 
      $("html,body").animate({scrollTop: $anchor.offset().top}, "slow"); 
      $anchor = $anchor.next('.anchor'); 
     } 

     return false; 
    }); 
});

来源

2013-10-27 17:22:00

非常感谢你的朋友！似乎要做的伎俩。 –

jQuery平滑滚动到锚点

回答

相关问题