[Javascript] 스크롤 앵커 이동, window.scrollTo , 바로가기 구현

앵커라 한다. anchor 기능, 바로가기 기능을 javascript 상으로 만들어보도록 하자.

 

브라우저의 웹상에서, 문제가 되는것이 Height 값이다.

각각의 Height 값에 따라서, 해당 그 높이 위치로 바로가기 이동된다.

 

https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo

Window.scrollTo() - Web API | MDN

 

mozilla 사이트에서 보면 기본 함수 기능이 바로 나와있다.

window.scrollTo(x좌표값, y좌표값)

 

indow.scrollTo( 0, 1000 ); 

 

x 좌표값을 넣어주면 가로방향, y 좌표값은 세로방향인 Height 값을 뜻한다.

 

실제로 위의 소스를 웹상에서 돌려보면 아래로 스크롤 엄청빠르게 순간이동되어 버려서 어쩐지 멋지지가 않다.

 

 

window.scrollTo({top:1000, behavior:'smooth'});

 

위의 소스를 보면 { } 형태의 속성을 지정해줄수도 있다. 

hehavior 가 스무드하게 이동을 뜻한다.

 

자 그러면,  실제 코드상으로 앵커기능을 만들어 보자.

 

PHP 형태로 일단 만들어 봤는데, ASP, JSP 또한 같은 패턴이므로 충분히 응용하면 될것이다.

<a href="a.php?hGap=200">이순신</a>
<a href="a.php?hGap=500">홍길동</a>
<a href="a.php?hGap=1000">강감찬</a>
 
 
 
<?
$hGap = $_GET[hGap];
?>
 
<?
if ($hGap) {
?>
    <script>
    window.scrollTo({top:<?=$hGap?>, behavior:'smooth'});
    </script>
<?
} // end of if
?>
</body>
</html>