화면 내리면 최상단으로 이동할 아이콘 뜨고, 맨 위에 있으면 아이콘 사라지게 하기

jquery 에서 제공해주는 스크롤 이벤트인 아래 두개로 구현이 가능하다 !!

1. $(document).scroll()  //스크롤이 변경될 때마다 이벤트를 발생시킴

2. $("body").scrollTop()  //브라우저의 스크롤 위치 값 //최상단이면 0을 반환함

* 구현방법 *

1. Body 내에 아이콘부터 선언

<!-- 상단에 둥둥 떠있는 아이콘 (상단으로 이동) -->
<img class="gotoTop" src="/images/board/gotoTop.png">

2. Head 내에 자바스크립트 선언

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$(function(){     //*스크롤감지     $("body").scroll(function(){         var scrollLocation = $("body").scrollTop(); //브라우저의 스크롤 값                  if(scrollLocation!=0){ //화면을 내리면 gotoTop 뜨게하고             $(".gotoTop").fadeIn();         }else{                    //화면을 올리면 gotoTop 사라지게하기             $(".gotoTop").fadeOut();         }     })       //*상단에 둥둥 떠있는 아이콘 (상단으로 이동)     $(".gotoTop").on("click", function(){         $("body").scrollTop(0);     }) }   Colored by Color Scripter

cs

3. Head 내에 CSS 선언

.gotoTop {
  display : none;
  cursor : pointer;
  position: fixed;
  bottom: 10%;
  right: 5%;
  width: 50px;
  height: 50px;
  z-index:999;
}

참고 : 2018/07/13 - [Tip.] - 페이지 최상단으로 이동시키는 스크립트

참고 : https://webisfree.com/2014-11-25/[jquery]-무한-스크롤-구현하기-스크롤-이벤트-scroll()