Faites défiler jusqu'à DIV en utilisant JQuery ne fonctionne pas après le chargement de la page

Question

J'essaye de faire défiler la page à DIV, dont l'ID est envoyé par QueryString. Le contenu HTML de la page est chargé du côté serveur dans SharePoint 2010.

J'ai utilisé setTimeout() pour attendre que le contenu soit chargé sur la page et après expiration du délai j'applique la logique pour faire défiler jusqu'à div. Mais la page ne défile pas. Code est comme ci-dessous:

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]; 
    } 
} 

Pouvez-vous s'il vous plaît suggérer ce que je suis absent?

Merci d'avance.

Answer 1

Je trouve une solution à ma question. Nous pouvons utiliser JavaScript simple au lieu de la fonction 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" travaillera pour faire défiler jusqu'à div notamment sur la page.

Answer 2

Vous n'avez pas besoin d'écrire votre propre fonction pour attendre le chargement de la page. Il y a une fonction jQuery pour cela: .ready()

Votre code de défilement semble fonctionner correctement avec le code fictif. Cela pourrait fonctionner un peu mieux pour vous:

$(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]; 
    } 
} 

qui est en supposant que getQueryStringParameter renvoie la valeur correcte. Il n'y a aucun moyen pour moi de le savoir car cela dépend de votre backend et de l'URL utilisée.