탑버튼

1. 탑버튼

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

1.1. 제이쿼리

지시문
HTML
CSS
JQ

탑버튼을 만들어보자

<!DOCTYPE html>
body {
$(function () {

1.2. vanilla JS
완성화면
window.addEventListener('scroll', function () {
  if (this.scrollY > 300) {
    document.querySelector('.go-top').style.display = 'block';
  } else {
    document.querySelector('.go-top').style.display = 'none';
  }
});

document.querySelector('.go-top').addEventListener('click', function (e) {
  e.preventDefault();
  document.querySelector('html, body').scrollTo({ top: 0, behavior: 'smooth' });
});
목차
1.1. 제이쿼리
1.2. vanilla JS