• 방명록을 남겨 주세요 :-) 일주일 동안 열지 않기
  • 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

깨알팁

팁 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

웹팁 a태그 또는 jqeury를 이용하여 '위로 가기' 버튼 만들기

이윰
158 1 0

# a태그와 인라인 스타일로 '위로 가기' 버튼 만들기

<!--원하는 위치에 버튼 넣기-->
<a href="#" style="display:scroll; position: fixed; rigit: 20px; bottom: 20px; title=top>위로</a>

# jqeury로 스크롤을 어느 정도 내렸을때 '위로 가기' 버튼이 나오게 만들기

<!--원하는 위치에 버튼 넣기-->
<button type="button" name="button" class="bt_top">위로</button>
$(window).scroll(function () {
     var quickScroll=$(document).scrollTop();
     if (600 <= quickScroll ) {
       $('.bt_top').css('display','block');
      }else {
        $('.bt_top').css('display','none');
      }
    });

    $('.bt_top').click(function(){
      $('html, body').animate({
        scrollTop: '0'
      }, 800);
    });

스크롤 높이가 600이상이 되면 위로 가기 버튼이 나타납니다.

 

# 버튼 위치와 스타일

텍스트 '위로'라고 쓰여진 부분을 이미지나 fontawesome 아이콘 등으로 교체하고 스타일을 꾸밉니다.

/* ----- css ----- */
.bt_top {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  z-index:99;
}
신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 조회 수
0
image
7
0
image
20
0
normal
10
0
normal
62
+1
normal
86
0
normal
104
+1
image
241
+1
image
261
+3
normal
576
+1
image
217
+1
image
184
0
normal
166
0
normal
192
+1
normal
750
+1
normal
124
+5
image
204
+1
normal
177
+1
normal
892
+1
image
215
+1
normal
290