[js/html] '맨 위로' 버튼 구현하기 / '맨 아래' 버튼 구현 (주말공부)

1. a 태그 사용하기

#만 사용쓰면 그것이 곧 자기 페이지를 의미하는 것!!1

<a href="#">맨 위로</a>

 

 

2. 자바스크립트 사용

 

 

 

 

<div id="wrap">
  <a id="topbutton"></a>
  	<p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
    <p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
  	<p> 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징</p>
 </div>

 

#topbutton {
  display: inline-block;
}

#topbutton:active {
  background-color: red;
}
#topbutton.show {
  opacity: 1;
  visibility: visible;
}

 

$(function(){
  $('#topbutton').on('click',function(e){
      e.preventDefault();
      $('html,body').animate({scrollTop:0},700);
  });
  
  $(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
      $('#topbutton').addClass('show');
    } else {
      $('#topbutton').removeClass('show');
    }
  });
});

 

 

.preventDefault()

a 태그나 버튼에서 주로 사용되며, 클릭을 했을때 링크 이동이나 창 새로고침되는 원래 기능을 막아준다. 

 

 

 

---

 🔎 페이지 스크롤 위치 이동하는 방법 

animate를 사용하여 페이지 스크롤 이동시키는 두 가지 방법
1. $('html, body').animate({scrollTop: '0'}, 7000);
2. $('html, body').scrollTop(0);

 animate() 메소드의 scrollTop 속성을 이용하면 스크롤 이동이 부드럽게(자연스럽게) 상단 또는 하단의 원하는 위치로 이동

scrollTop() 메소드는 즉시 이동(부드럽지 않게 이동함)

 

 

---

추가로 '맨 아래로' 내리기는 아래 코드처럼 작성하면 된다고 하넹

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();