javascript - 超时后 jQuery 动画到底部功能

Question

情况如下:

当用户单击特定链接(在 div.Foo 内)时，将加载页面。 我想要的是“滚动到底部”仅在用户单击并加载新页面后执行(而不是同时)。

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

$(document).ready(function () {

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

});

但它无法正常工作。

注意!:我不能使用preventDefault，因为应该加载新页面!而且也不可能使用 #hash，因为 URL 是动态生成的。

Answer 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');
})

有了这个，如果有标签 #scrollBottom在 URL 中，页面在 1 秒后滚动到底部(一秒向您显示延迟，设置您喜欢的值)。

<小时/>

点击时动态添加 Hashtah

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

$(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这只是一个示例，您可以使用任何一个。

:) 尝试...