1 탑버튼

1. 탑버튼

페이지 상단으로 이동하는 탑버튼을 만들어보자

1.1. 제이쿼리

지시문
HTML
CSS
JQ

1.2. vanilla JS

1
window.addEventListener('scroll', function () {
2
  if (this.scrollY > 300) {
3
    document.querySelector('.go-top').style.display = 'block';
4
  } else {
5
    document.querySelector('.go-top').style.display = 'none';
6
  }
7
});
8

9
document.querySelector('.go-top').addEventListener('click', function (e) {
10
  e.preventDefault();
11
  document.querySelector('html, body').scrollTo({ top: 0, behavior: 'smooth' });
12
});