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返回正确的值。我无法知道这一点，因为它取决于您的后端和正在使用的网址。

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

2 个答案: