top 버튼 click scroll / javascript

HTML

<div class="wrap">
  <section class="con1">section1</section>
  <section class="con2">section2</section>
  <section class="con3">section3</section>
  <section class="con4">section4</section>
  
  <div class="top">top</div>
</div>

 

CSS

.wrap {
  position: relative;
}
.top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  cursor: pointer;
}

스크롤이 스무스하게 되지 않는다면 아래의 CSS를 body에 붙인다.

 

    scroll-behavior: smooth;

 

 

JS

// top 버튼
const topBtn = document.querySelector('.top');
topBtn.addEventListener('click', () => {
  $('body, html').animate({scrollTop:0}, 400);
  return false;
});

 

 

 

See the Pen top 버튼 scroll by jeunseon (@jeunseon) on CodePen.