상담문의 010-2343-0702

Home > 고객센터 > 자료실

자료실

자료실

[jQurery]맨위, 맨아래로 보내는 버튼(TOP버튼)

  • 하나솔루션
  • 2020-08-14 10:54:46
  • hit1143
  • 122.34.166.44

HTML

1
2
<a id="TopButton" class="ScrollButton"><img src="(TopButton 이미지 주소)"></a>
<a id="BottomButton" class="ScrollButton"><img src="(BottomButton 이미지 주소)"></a>
cs

태그를 만들고 그 안에 <img> 태그를 넣습니다.

<img> 태그 자체를 사용해도 상관은 없습니다.

 

1
<a id="footer"></a>
cs

그리고 제일 하단에도 태그를 하나 만들어줍니다.

이 또한 <footer> 태그 자체를 사용해도 상관은 없습니다.

 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ScrollButton {
position: fixed;   /* 버튼의 위치 고정 */
right: 10px;       /* x 위치 입력 */
cursor: pointer;   /* 호버링 했을 때 커서 모양 변경 */
z-index: 10;       /* 다른 태그에 가려지지 않게 우선순위 변경 */
display: none;     /* 스크롤 위치에 상관없이 보이게 하려면 생략 */
}
 
/* 두 태그에 각각 y 위치 입력 */
#TopButton {
bottom: 108px;        
}
#BottomButton {
bottom: 75px;
}
cs

 

 

Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 600) {
            $('.ScrollButton').fadeIn();
        } else {
            $('.ScrollButton').fadeOut();
        }
    });
        
    $("#TopButton").click(function() {
        $('html').animate({scrollTop : 0}, 600);
    });
 
    $("#BottomButton").click(function() {
        $('html').animate({scrollTop : ($('#footer').offset().top)}, 600);
    });
});
cs
 
게시글 공유 URL복사
댓글[0]

열기 닫기

빠른상담 신청현황

  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 고**님이 문의하셨습니다.
    상담신청
  • 박**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • 성**님이 문의하셨습니다.
    계약완료
  • 숙**님이 문의하셨습니다.
    계약완료
  • 만**님이 문의하셨습니다.
    계약완료
  • 주**님이 문의하셨습니다.
    상담완료
  • 성**님이 문의하셨습니다.
    상담완료
  • 현**님이 문의하셨습니다.
    상담완료
  • 하**님이 문의하셨습니다.
    상담완료
  • 이**님이 문의하셨습니다.
    상담완료
  • 정**님이 문의하셨습니다.
    상담완료

무통장 계좌번호

하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)

네임서버

1차 ns1.webit.kr 211.215.17.210
2차 ns2.webit.kr 211.215.17.212

서버 호스팅 주소

서울 서초구 서초동 1710-1 SK 브로드밴드 IDC

커뮤니티

  • 042-362-0702

  • 업무시간 : 월~금 오전9시 ~ 오후 6시

  • 점심시간 : 오후 12시 ~ 오후 1시

  • 토,일,공휴일, 국경일 : 휴무

상단으로 바로가기