超时功能后jQuery动画到底部答案

【问题标题】：jQuery animate to bottom after timeout function超时功能后jQuery动画到底部
【发布时间】：2014-10-14 07:43:50
【问题描述】：

情况如下：

当用户点击特定链接（在 div.Foo 中）时，会加载一个页面。我想要的是“滚动到底部”仅在用户单击并加载新页面后（而不是同时）执行。

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

$(document).ready(function () {

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

});

但它不能正常工作。

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

【问题讨论】：

您是否尝试将preventDefault 添加到处理程序？
它在 chrome 中为我工作。你有一个语法错误，在最后一个 ) 之前缺少一个 };
a preventdefault 将停止加载新页面。如果它是常规链接，则上述方法不起作用，因为在加载新页面时，带有 javascript 的页面已被卸载。您必须在没有新页面上的点击功能的情况下执行此操作。
新页面需要滚动到底部吗？
@Frogmouth 确实是的

标签： javascript jquery timeout

【解决方案1】：

在 docReady 上滚动底部

您可以将hashtag 添加到您的Foo a 网址，例如：

[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 秒后滚动到底部（一秒显示延迟，设置你喜欢的）。

点击时动态添加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 只是一个例子，你可以使用任何一个。

:) 试试...

【讨论】：

这是不可能的，因为 URL 是动态生成的。所以我不能在我的网址中应用#hash。
哦...您可以通过 Javascript。我编辑我的答案... :)

【解决方案2】：

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

【讨论】：

preventDefault 正在停止加载新页面，这不是解决方案。所以它应该加载新页面，然后动画到底部。
我明白了，所以加载了一个新页面？然后它之后的JavaScript不会被执行。您必须在新加载的页面上设置 JavaScript。
是的，但问题是，所有页面上都加载了主脚本。不同的页面实际上是产品变体。