Jquery fait défiler jusqu'à l'élément

Question

J'ai un peu de JQuery qui met à jour le contenu de ma page via Ajax (pagination à travers du contenu de sous-table) et je veux que la page "saute" (défile) vers le haut de la page section où le contenu vient d'être mis à jour. J'ai trouvé un peu de code pour essayer de réaliser le défilement, mais il ne va jamais de retour en haut de la page et non à l'élément spécifique:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".page-number").on("click", function() { 
      var page = parseInt($(this).html()); 
      $.ajax({ 
       url: '@Url.Action("ProductReview")', 
       dataType: 'html', 
       data: { 
        "id": @Model.Product.ProductID, 
        "page": page 
       }, 
       success: function (data) { 
        $("#review-list").html(data); 
        $("#page-number-"+ page).addClass("selected"); 
        //location.hash = "#prodreviews"; 
        scrollToAnchor("prodreviews"); 
       } 
      }); 
     }); 
     // scroll handler 
     var scrollToAnchor = function(id) { 
      // grab the element to scroll to based on the name 
      var elem = $("a[name='"+ id +"']"); 
      // if that didn't work, look for an element with our ID 
      if (typeof(elem.offset()) === "undefined") { 
       elem = $("#"+id); 
      } 
      //alert(elem.offset().top); 
      // if the destination element exists 
      if (typeof(elem.offset()) !== "undefined") { 
       // do the scroll 
       $('html, body').animate({ 
        scrollTop: elem.offset().top 
       }, 1000); 
      } 
     }; 
    }); 
</script> 

C'est dans un Asp.net MVC Vue partielle qui se recharge dans la vue rasoir principal lorsque les liens de pagination sont cliqués - cela fonctionne bien. Je l'ancre suivante près du haut de cette vue partielle:

<a name="prodreviews" id="prodreviews"></a> 

Et mes liens de pagination dans même vue partielle sont:

<div class="pagewrapper"> 
@for (int i = 1; i <= Model.Reviews.NumberOfPages; i++) 
{ 
    <a class="page-number" id="page-number-@i" href="javascript:void(0)">@i</a> 
} 
</div> 

Est-ce parce que l'ancre est rendu à nouveau lorsque les feux Ajax? J'ai essayé de le déplacer dans la vue principale de rasoir mais le code de jQuery n'a pas semblé pouvoir le trouver du tout (malgré le fait devrait être dans le DOM?)

Je peux voir quand l'ancre est de retour dans la vue partielle et quand l'alerte n'est pas remmenée, elle trouve l'élément et renvoie une valeur négative, car c'est le décalage par rapport à l'endroit où je suis actuellement? Est-ce que la page essaye alors de faire défiler vers ce point absolu, plutôt que de revenir là où je le veux?

Answer 1

DEMO - .animate() fonctionne très bien.

Assurez-vous que l'élément #prodreviews existe sur la page et donnez-lui un style CSS pour pouvoir l'identifier visuellement sur la page. En outre, si la page contient floating elements au-dessus de la balise #prodreviews, vérifiez qu'elle est clear ed.

Ouvrez Outils de développement dans votre navigateur Web et recherchez d'autres erreurs JavaScript dans la console, ce qui peut empêcher l'exécution de ce code spécifique.