在页面加载后使用JQuery滚动到DIV不起作用

Question

我正在尝试将页面滚动到DIV，其ID通过QueryString发送。 页面的HTML内容是从SharePoint 2010的服务器端加载的。

我已经使用setTimeout()等待内容加载到页面上，超时后我应用逻辑滚动到div。 但该页面不滚动。 代码如下：

ExecuteOrDelayUntilScriptLoaded(getThankyouMsg, 'sp.js');

function getThankyouMsg() {
    var fid = getQueryStringParameter("fid");
    setTimeout(function () {
        //window.location.href = window.location.href.split('?')[0] + "#" + fid;
        jQuery('html, body').animate({
            scrollTop: jQuery("#" + fid).offset().top
        }, 2000);
    }, 7000);
}

function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

你能告诉我我错过了什么吗？

提前致谢。

Answer 1

我找到了解决问题的方法。 我们可以使用简单的JavaScript而不是jQuery animate功能。

ExecuteOrDelayUntilScriptLoaded(getThankyouMsg, 'sp.js');

function getThankyouMsg() {
    var fid = getQueryStringParameter("fid");
    setTimeout(function () {
        location.hash = "#"+fid; //This line will navigates to Div ID
    }, 7000);
}

function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

Location.Hash = "#divId"将向下滚动到页面上的特定div。

Answer 2

没有必要编写自己的函数来等待页面加载。 有一个jQuery函数： .ready（）

您的滚动代码似乎与虚拟代码一起正常工作。 这可能会对您有所帮助：

$(document).ready(function() {
  getThankyouMsg();
});

function getThankyouMsg() {
  var fid = getQueryStringParameter("fid");
  jQuery('html, body').animate({
      scrollTop: jQuery("#" + fid).offset().top
  }, 2000);
}

function getQueryStringParameter(paramToRetrieve) {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

这是假设getQueryStringParameter返回正确的值。 我无法知道这一点，因为它取决于您的后端和使用的URL。