페이지 최상단 스크롤 이동 (feat. iframe)

 

화면이 웹에 비해서 상대적으로 작은 모바일이나 쇼핑몰처럼 다양한 상품을 보여줘야 하는 사이트에서는 화면이 길어지게 되면 사용자가 다시 화면의 최상단으로 이동하기가 굉장히 힘들어집니다. 

그래서 이런 단점을 보완하기 위해 특정 버튼을 클릭하게 되면 해당 Page의 최상단으로 이동하는 기능을 구현하여 사용자에게 편의성을 제공하게 됩니다. 

$('.btn-top').on('click', function(){   
    $('html, body').animate({scrollTop:0}, 300);}
);

 

해당 기능에 조금 더 인터렉티브한 효과를 주고 싶으면 easing플러그인을 사용하여 다양한 텐션의 느낌으로 모션 효과를 사용할 수 있습니다.  easing은 JQuery에서 animation을 사용할 때 해당 animation의 속도를 조절하여 효과를 나타내 주는 게 easing입니다.  easing 함수는 JQuery에서 기본적으로 [swing] 값은 기본적으로 제공하고 있으며 그 외의 값을 사용하려면 해당 라이브러리를 추가해야만 사용할 수 있습니다.

기본적인 사용법으로는 animation 속성뒤에 (효과, 시간, easing효과) 순서대로 easing효과를 적어주면 됩니다.  더 많은 효과는 easing플러그인 사이트에서 참고하시면 보다 자세히 나와 있습니다.

$('.btn-top').on('click', function(){   
    $('html, body').animate({scrollTop:0}, 300, 'easeOutQuad');}
);

 

다른 스크립트에 easing을 적용한 예

$('.test').animate({opacity:1}, 700, "easeOutQuad");

 

 

방금 페이지의 최상단으로 이동하는 방법을 배웠습니다.

그럼 우리가 화면에 Iframe으로 불러온 화면에서도 동일한 기능을 사용하고 싶어서 해당 기능을 적용하게 되면 어떻게 될까요? 

 

결과는 동작하지 않습니다. 처음 저도 이 현상을 접했을 때는 제가 만든 스크립트 코드가 잘못된 것이라 생각해서 예제 파일을 만들어서 동작시켜보았는데 스크립트는 전혀 이상 없이 잘 동작되었습니다. 그래서 많은 검색을 통해 얻게 된 결론은  iframe에 스크롤 이벤트를 주기 위해선 iframe의 상위로 호출을 해줘야 한다는 것을 알게 되었습니다.

iframe의 상위로 호출을 해주는 방법은  ['window.parent.document'] 를 사용하면 됩니다.

 

$('html, body', window.parent.document).animate({scrollTop:1000}, 300);