[자바스크립트] 해시로 이동하면 헤더 높이만큼 스크롤 하기

사이트 내부에서 특정 id로 이동하는데, 고정된 헤더가 페이지 최상단에 존재한다면, 대상을 가려버립니다.

예시)

스크립트가 작동하는 경우

스크립트가 작동하지 않는 경우

티스토리에서 해시로 이동하는 대표적인 경우는, Z, X키를 누르면 최근 글 / 댓글로 이동하는 경우와 최근 댓글을 클릭하면 해당 댓글로 이동하는 경우 두 가지가 있겠네요.

$(window).on("load", function () {
    $(function () {
        var c = location.hash,
            d = c.indexOf("comment");
        0 <= d && $("html, body").animate({
            scrollTop: $(c).offset().top - 100
        }, 500)
    })
});

기본적으로, 윈도우를 로드한 뒤, 해시에 comment란 단어가 있으면 자동으로 스크롤 하는 스크립트입니다.

저는 댓글에 이미지 등을 달 수 있어서 윈도우가 로드되면 실행되도록 했는데, 그게 아니라면 굳이 $(window).on("load"와 함께 사용하실 필요는 없습니다.

window.onhashchange = function () {
    var a = location.hash,
        b = a.indexOf("comment"),
        c = a.indexOf("recent");
    0 <= b + c && $("html, body").animate({
        scrollTop: $(a).offset().top - 100
    }, 500)
};

다음으론, 최근 댓글을 클릭했는데 최근 댓글이 내가 보고 있는 페이지에 있거나, 최근 글/댓글 목록을 볼 때,  스크롤 되는 스크립트입니다.

저는 사이드바를 열면 #nav이란 hash로 이동시켜서, 뒤로 가기 버튼으로도 사이드바를 닫을 수 있도록 해둬서 이렇게 귀찮게 해야 하는데, 모든 hash 변경에 동일하게 적용하고 싶으시다면

window.onhashchange = function () {
    $("html, body").animate({
        scrollTop: $(location.hash).offset().top - 100
    }, 500)
};

훨씬 간단하게 적용 가능합니다.

$("#recentComments a").click(function () {
    var a = window.location.href,
        b = $(this).attr("href"),
        c = a.indexOf(b);
    0 <= c && $("html, body").animate({
        scrollTop: $(a).offset().top - 100
    }, 500)
});

마지막입니다. 이건 적용을 안 하셔도 크게 상관은 없습니다.

만약 #comment14512076 라는 최근 댓글로 이동한 뒤, 스크롤을 끌어 올려서 다시 해당 댓글로 가는 링크를 클릭하면 자동으로 스크롤을 끌어 올려주는 스크립트입니다.

굳이 해당 댓글을 보려고 이동한 뒤, 다시 스크롤을 올려서 해당 댓글을 클릭할 일은 그렇게 많이 없으니...건너뛰셔도 될 듯합니다.

마지막으로, 본인의 디자인에 맞게 "100"이라는 수치를 조정해주시고, 빠른 애니메이션을 원한다면 "500"이란 숫자를 줄이시고, 느린 애니메이션을 원한다면 늘리시면 됩니다.