jQuery动画到底后超时函数

Question

情况如下：

当用户点击一个特定的链接（在div.Foo中）时，就会加载一个页面。我想要的是只有在用户点击并加载新页面后（而不是同时）才能执行"向下滚动"。

到目前为止，我有以下代码：

$(document).ready(function () {
  $('.Foo a').click(function () {
    setTimeout(function () {
        $('html, body').animate({ scrollTop: $(document).height() }, 'slow');
    }, 100);
  });
});

但它工作不正常。

注意！：我不能使用preventDefault，因为应该加载新页面！此外，由于URL是动态生成的，所以不可能使用#hash。

Answer 1

在docReady上向下滚动

您可以将hashtag添加到您的Foo a url中，如：

[yourlink]#scrollBottom

<div class="Foo"><a href="http://test/#scrollBottom">Click Me</a></div>

并且在第一个页面中不添加任何JS，在目的页面中添加此代码：

$(function(){
    if(location.hash.indexOf("scrollBottom") >= 0) 
     $('html, body').delay(1000).animate({ scrollTop: $("body").height() }, 'slow');
})

这样，如果URL中有一个标签#scrollBottom，页面会在1秒后滚动到底部（1秒后显示延迟，设置您喜欢的内容）。

---

点击后动态添加Hashtah

当有人点击Foo a时，您可以动态添加#hashtag编辑您的处理程序：

$(document).ready(function () {
  $('.Foo a').click(function (e) {
      e.prevemtDefault();
      location.href = $(this).attr("href") + "#scrollBottom";
  });
});

或

$(document).ready(function () {
  $('.Foo a').click(function () {
      $(this).attr("href", $(this).attr("href") + "#scrollBottom");
  });
});

#scrollBottom只是一个例子，您可以使用任何一个。

：）尝试。。。

Answer 2

点击锚点后，它会加载一个新页面，因此不会执行其他JavaScript。你必须在新页面上添加JavaScript才能滚动到你想要的部分。