요소에 대한 Jquery 스크롤이 페이지 상단으로 이동합니다.

Question

Ajax (일부 하위 테이블 내용을 페이징)를 통해 내 페이지 내용을 업데이트하는 JQuery가 있고 페이지를 맨 위에 "이동"(스크롤)하고 싶습니다. 콘텐츠가 방금 업데이트 된 섹션 나는 시도하고 스크롤을 수행하는 몇 가지 코드를 찾았지만 그것은 단지 지금 바로 페이지 위로 가기 아닌 특정 요소에 간다 :

<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> 

이 자체를 다시로드 Asp.net MVC 부분보기 내 페이지 링크가 클릭 될 때 주 면도기보기로 - 그것은 잘 작동합니다.

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

과 같은 부분보기에서 내 페이징 링크는 다음과 같습니다 :

<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> 

앵커가 다시 때 아약스 화재 렌더링되기 때문에인가 나는이 부분보기의 상단에 다음과 같은 앵커가? 나는 주 면도날 뷰로 이동하려고 시도했지만 jQuery 코드는 전혀 찾지 못하는 것 같습니다 (DOM에 있어야한다는 사실에도 불구하고).

앵커가 돌아 왔을 때를 볼 수 있습니다. 부분보기에서 그리고 경고가 un-remmed 될 때 그것은 요소를 찾아서 그것이 현재있는 곳의 오프셋이기 때문에 음수를 반환합니까? 그런 다음 페이지가 내가 원하는 위치로 되돌아 가지 않고 그 절대 지점으로 스크롤하려고합니까?

Answer 1

DEMO - .animate() 잘 작동합니다.

#prodreviews 요소가 페이지에 있는지 확인하고 CSS 스타일을 지정하여 페이지에서 시각적으로 식별 할 수 있도록하십시오. 또한 페이지에 #prodreviews 태그 위에 floating elements이 포함되어있는 경우 clear에 해당하는지 확인하십시오.

웹 브라우저에서 Developer Tools를 열고 콘솔에서 다른 JavaScript 오류 (이 특정 코드가 실행되지 않을 수 있음)를 확인하십시오.