본문 바로가기
IT/jsp

jsp 퀵메뉴, top버튼 만들기

by 김보리 2022. 6. 13.
728x90
반응형

js

 

//퀵메뉴 추가 이벤트 시작
$(document).ready(function(){
$(window).scroll(function(){  //스크롤이 움직일때마다 이벤트 발생
      var position = $(window).scrollTop()+200; // 현재 스크롤바의 위치값을 반환
      $("#Quick").stop().animate({top:position+"px"}, 400); //해당 오브젝트 위치값 재설정
   });

});

 

html 소스

<!-- 퀵메뉴 시작 -->
<div id="Quick" class="" style="position: absolute; right: 10px; top: 400px;">
    <table class="quickMenuBar" style="">
        <tr>
            <td colspan="2" style="cursor:pointer;">공지사항</td>
        </tr>
        <tr>
            <td colspan="2" style="cursor:pointer;" onclick="window.scrollTo(0,0);">TOP</td>
        </tr>
    </table>
</div>
<!-- 퀵메뉴 끝 -->   

 

onclick="window.scrollTo(0,0);" - 상위 화면으로 이동

 

실행결과

728x90
반응형

'IT > jsp' 카테고리의 다른 글

jsp 팝업창 게시 기한 설정하기  (0) 2022.06.14
jsp 팝업창 이동하기  (0) 2022.06.13
즐겨찾기 추가 및 해제 구현하기  (0) 2022.06.08
jsp 팝업창 만들기  (0) 2022.06.07
vTicker 활용한 롤링배너 사용하기  (0) 2022.06.07

댓글