[Javascript] 현재 스크롤 위치 퍼센트로 구하기

 

다음 뉴스 기사를 보면,

스크롤을 내리면 상단에 바가 현재 스크롤의 위치만큼 움직인다.

나는 확실히 사용자 입장에서 네이버보다 다음이 기사 보기 편하다.

 

그래서 현재 브라우저의 스크롤의 위치를 퍼센트로 구할 수 있는 함수를 만들었다.

 

function getScrollPosition() {
    return Math.floor(($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);
}
 
// 스크롤을 움직일때마다 해당 함수가 실행
$(window).scroll(getScrollPosition);

 

코드는 간단하다.

브라우저에서 스크롤이 움직일 때마다, 함수가 실행되어서 해당 위치를 퍼센트로 구해주는 것이다.

 

 

그림에서 볼 수 있듯이, 스크롤이 움직이면서 해당 위치를 퍼센트로 구해준다.

이것을 css와 잘 조합하면, 다음에서 보여지는 것처럼 바 이동이 가능하다. (css는 못하기에 패스ㅜ.ㅜ)

 

그리고 유념해야하는 부분이 있는데

스크롤이 없는 브라우저에서는 값이 계산되지 않으니 이점 유념해서 예외처리 해주자.