조각으로 페이지를 새로 고침 할 때 스크롤하십시오.

Question

의견이있는 페이지가 있습니다. article page이라고합시다. 이제 새로운 설명을 추가 할 때마다이 페이지를 새로 고침해야합니다. 그것의 위치를 ​​계산하는 것이 꽤 복잡 할 수 있기 때문에 나는 그것을 DOM에 직접 주입 할 수 없다.

가 나는 AJAX 요청을 전송하고있어, 응답에서 내가 얻을 :

• 주석의 ID article page

의

URL을 그럼 난 형태 myawesomewebsite.com/articlePage/{{articleId}}#{{commentId}}에 URL을 구성하는 데 사용합니다. 그래서 기본적으로, 나는 현재 페이지를 리프레시하고, 추가적으로 페이지의로드시에 새로운 코멘트를 볼 수 있도록 조각 부분을 추가한다.

문제가

나는 부착 된 새 코멘트와 함께 "새로운"페이지를 얻을 수있는 URL

및 window.location.reload(true)을 구성

• window.location = articlePageURL + "#" + commentId를 사용하는 코멘트와 div에 자동 스크롤 한 후, 브라우저는 이전 페이지 (새로 고침 전에 동일한 페이지)에 있던 위치로 건너 뜁니다.

  두 번째 페이지 건너 뛰기를 끌 수있는 방법이 있습니까?

Answer 1

나는 내가 원하는 것을 얻을 수 있었다.

URL의 해시 조각에 주어진 id에 자동 스크롤을 사용하는 대신이 요소로 직접 스크롤합니다. 핵심은 body 요소에 scrollTop css 속성을 사용하고 animate 기능과 결합하는 것입니다.

예상대로 작동 할뿐만 아니라 훨씬 뛰어난 UX를 제공합니다.