在頁面加載后使用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。