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

点击锚点后，它会加载一个新页面，因此您的其他JavaScript将无法执行。您必须在新页面上添加JavaScript以滚动到所需的部分。

Answer 2

在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

当有人点击#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只是一个例子，您可以使用任何一个。

:)试试......

超时函数后jQuery动画到底部

2 个答案:

在docReady上滚动底部

点击