• 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

블로그/웹사이트

홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

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

이윰
155 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
normal
  27
+1
normal
  32
0
normal
  32
+1
image
  166
+1
image
  187
+1
normal
  286
+1
image
  181
+1
image
  152
0
normal
  142
0
normal
  173
+1
normal
  698
+1
normal
  155
+1
normal
  297
+1
image
  180
+1
normal
  228
+1
normal
  185
+1
normal
  209
+2
image
  391
0
normal
  502
+2
image
  161