Question

我有一个将页面滚动到特定div的功能。和另一个重新加载页面并调用滚动功能的函数。

它几乎按照我想要的方式工作，我正在努力解决的问题是每当加载页面时滚动功能都会加载，而不是仅仅在点击事件上加载。我怀疑这是非常简单但似乎无法解决的问题。

我的代码如下：

$(document).ready(function(scrolldown) {
    $('html, body').animate({
        scrollTop: $('#main-content').offset().top - 10
    }, 'slow');
});

$('#return').on("click", function() {
    location.reload();
    scrolldown();
});

提前致谢

Answer 1

您的函数未命名，您将其作为在文档就绪时调用的闭包。

$(document).ready(function() {

  function scrolldown () {
    $('html, body').animate({
        scrollTop: $('#main-content').offset().top - 10
    }, 'slow');
  }

  $('#return').on("click", function() {
    location.reload();
    scrolldown();  //THIS WILL NEVER RUN
  });

});

现在我突出显示的行永远不会运行。原因是页面刷新。它之后的代码将无法运行。它不会在下一页加载时神奇地运行。所以你要做的事情是不可能的。单击后和刷新后无法运行代码。

你能做什么？您可以设置cookie / localstorage来表示页面已重新加载，并检查页面何时加载。如果设置了值，则滚动页面。其他选项，使用查询字符串...不确定这是最好的主意。或者您无法重新加载页面并使用Ajax通过重新加载页面来执行您要完成的任何操作。

或者您可以使用人们通常用来设置页面位置的锚点。

$(document).ready(function() {

  if (localStorage.scroll) {  //if localstroage has the key, than run animation
    localStorage.removeItem("scroll");
    $('html, body').animate({
        scrollTop: $('#main-content').offset().top - 10
    }, 'slow');
  }

  $('#return').on("click", function() {
    localStorage.scroll = true;  //set the storage so code runs on next page load
    location.reload();
  });

});

功能在负载而不是点击时排除

1 个答案: