Question

我正在使用一个粘性条，以便用户可以单击链接并滚动到该页面的特定部分。唯一的问题是它只会滚动到第一个元素。如果你点击另一个链接，它会缓慢地向下移动，但实际上并没有移动。

以下是它的作用：http://jsfiddle.net/jcdevelopment/bEcUy/

这是我的电话，有人看错了吗？

jQuery(document).ready(function (){
    jQuery("#notinmas").click(function (){
                //$(this).animate(function(){
                    jQuery('html, body').animate({
                        scrollTop: jQuery("#notinmasb").offset().top
                    }, 2000);
                //});
            });
        });

Answer 1

看看这个分叉的小提琴：http://jsfiddle.net/qDB4R/4/ 我在标记的下方向您的锚标记添加了不间断空格 。我还清理了一些jQuery，因为你只需要一个document.ready。

Answer 2

这是 FIDDLE

您有多个ID，因此请使用HTML5数据属性替换锚点ID，例如data-id

*注意：拥有多个ID无效（请改用class）并在您的情况下导致链接为自己设置动画。

<div class="stickyEditorD">
  <a data-id="notinmas">SKUs Not in MAS</a>| 
  <a data-id="subnotinhouse">Substrates not in-house</a>|
  <a data-id="notverinmas">Not verified with MAS</a>|
  <a data-id="openorders">Open order items</a>|
  <a data-id="shipped">Shipped orders</a>| 
  <a data-id="giftcardhis">Gift Card history</a>|
  <a data-id="os_jobs">OS jobs</a>|
  <a data-id="ezquotes_p">EZ quotes Production</a>|
  <a data-id="ezquotes_f">EZ quotes Fulfillment</a>
</div>

而不是将ID为<a id="notinmasb"></a>的空锚作为目标，您可以在.box div中添加id，例如<div id="notinmasb" class="box">它更精确。

并使用此脚本而不是为每个锚编写单独的脚本。（jQuery写得少做多了）

jQuery(document).ready(function() {
  jQuery(".stickyEditorD a").click(function() {
    jQuery('html, body').animate({ scrollTop: jQuery("#"+$(this).data('id')).offset().top }, 2000);
  });
});

Jquery scrollTop只会滚动到第一个id而不是其他id

2 个答案: