정

맨위로 가기 버튼

· 2022-11-20 (일) 15:08:48 · 5063 · 6

팁이랄건 없구요.

고수님들은 패스~~~

그냥 필요에 의해서 구글링 해서 맞게 수정해봤습니다.

일단, 저희 사이트에선 잘 구동해서 맨날 얻어만 가는 보답을 좀 해 봅니다.

 

<style>

#myBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 30px;

  z-index: 99;

  font-size: 18px;

  border: none;

  outline: none;

  background-color: red;

  color: white;

  cursor: pointer;

  padding: 15px;

  border-radius: 4px;

}

 

#myBtn:hover {

  background-color: #555;

}

</style>

 

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

 

<script>

// Get the button

let mybutton = document.getElementById("myBtn");

 

// When the user scrolls down 20px from the top of the document, show the button

window.onscroll = function() {scrollFunction()};

 

function scrollFunction() {

  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

    mybutton.style.display = "block";

  } else {

    mybutton.style.display = "none";

  }

}

 

// When the user clicks on the button, scroll to the top of the document

function topFunction() {

  document.body.scrollTop = 0;

  document.documentElement.scrollTop = 0;

}

</script>

 

|

댓글 6개

좋아요.
2022-11-21 (월) 16:12:44
감사합니다
좋네요 감사합니다~
2023-01-08 (일) 09:27:00
감사합니다 좋습니다~

감사합니다 덕북에 해결했어요~ 

감사합니다. 유용하게 잘 쓰겠습니다.

댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,789건
+
제목 글쓴이 날짜 조회
22-12-13 조회 4,842
22-12-09 조회 6,057
22-12-09 조회 5,708
22-12-07 조회 4,650
22-12-06 조회 6,745
22-12-03 조회 6,668
22-12-02 조회 5,866
22-11-30 조회 8,707
22-11-25 조회 5,573
22-11-22 조회 5,354
22-11-20 조회 5,064
22-11-16 조회 6,656
22-11-15 조회 5,002
22-11-15 조회 5,786
22-11-14 조회 4,986
22-11-10 조회 6,070
22-11-08 조회 5,684
22-10-28 조회 5,807
22-10-27 조회 6,550
22-10-26 조회 5,395
22-10-25 조회 6,238
22-10-22 조회 5,539
22-10-19 조회 6,038
22-10-18 조회 4,947
22-10-16 조회 5,525
22-10-16 조회 5,522
22-10-12 조회 6,682
22-10-04 조회 7,349
22-09-28 조회 6,629
22-09-28 조회 5,672