【问题标题】:jQuery animation skips first timejQuery动画第一次跳过
【发布时间】:2012-08-31 23:12:46
【问题描述】:

我有一个简单的脚本,可以在两个锚点之间上下滑动页面:

$(document).ready(function() {

    $('a.switch').each(function() {
        var self = this;
        if(self.hash) {
            $(self).click(function() {
                $('html, body').stop().animate({
                    scrollTop: $(self.hash).offset().top
                }, 2000);
            });
         }
    });

});

但是,打开页面后第一次调用这个函数,没有动画,只是瞬间跳转到第二个锚点。然后它会恢复正常运行。

谁能解释发生了什么以及如何解决它?

【问题讨论】:

  • 让 Fiddle 链接如此易于理解。
  • 第一次删除点击check this
  • 你是不是把下面Sheikh的代码注释掉了,包括“els”变量?

标签: jquery animation hash scroll anchor


【解决方案1】:

我想你想用class nameswitch滚动页面加载的第一个元素,并且还想在每个元素上添加点击事件,如果是这样,你可以试试这个

$(document).ready(function() {
    var els=$('a.switch');
    $('html, body').stop().animate({
        scrollTop: $(els[0].hash).offset().top // els[0]=the first element, you can use the id too
    }, 2000);

    els.on('click', function(e) { // I've used 'on' and didn't use 'each'
        var self = this;
        if(self.hash) {    
            $('html, body').stop().animate({
                scrollTop: $(self.hash).offset().top
            }, 2000);
        }
    });
});​

DEMO.

【讨论】:

  • 在页面加载时滚动到第二个锚点。编辑:没关系,必须将 els[0] 更改为 els[1]。
  • els[0] 用于第一个元素,但什么不起作用?可能是我完全不明白,你查过demo here吗?
  • 澄清一下,a.switch 是您单击以滚动页面的按钮。他们的(其中两个)href 有两个锚点的标签,其中一个在页面加载时可见,另一个在屏幕下方滚动到视图中。
  • 我还应该解释一下,以防我在上面的 cmets 中的演示中没有明显看出这些开关对应于它们旁边的相反锚点。因此,在页面加载时,您会看到锚点 A 和滚动到锚点 B 的开关。在锚点 B 处是滚动回锚点 A 的开关。
  • 所以为了让您了解最新情况,我将 els[0] 更改为 els[1]。页面加载正常,但是当单击开关时,URL 会更改,但页面不会移动。再次点击后,页面会像往常一样向下滚动。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-08
  • 2013-10-03
  • 1970-01-01
  • 2012-02-03
  • 1970-01-01
相关资源
最近更新 更多