푸터
ScrollTo
<!-- FOOTER -->
<footer>
<div class="inner">
<ul class="menu">
<li><a href="javascript:void(0)" class="green">개인정보처리방침</a></li>
<li><a href="javascript:void(0)">영상정보처리기기 운영관리 방침</a></li>
<li><a href="javascript:void(0)">홈페이지 이용약관</a></li>
<li><a href="javascript:void(0)">위치정보 이용약관</a></li>
<li><a href="javascript:void(0)">스타벅스 카드 이용약관</a></li>
<li><a href="javascript:void(0)">윤리경영 핫라인</a></li>
</ul>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn--white">찾아오시는 길</a>
<a href="javascript:void(0)" class="btn btn--white">신규입점제의</a>
<a href="javascript:void(0)" class="btn btn--white">사이트 맵</a>
</div>
<div class="info">
<span>사업자등록번호 201-81-21515</span>
<span>(주)스타벅스 코리아 대표이사 이석구</span>
<span>TEL : 02) 3015-1100 / FAX : 02) 3015-1106</span>
<span>개인정보 책임자 : 강기원</span>
</div>
<p class="copyright">
© <span class="this-year"></span> Starbucks Coffee Company. All Rights Reserved
</p>
<img src="./images/starbucks_logo_only_text.png" alt="" class="logo" />
</div>
</footer>
/* FOOTER */
footer {
background-color: #272727;
border-top: 1px solid #333;
}
footer .inner {
padding: 40px 0 60px 0;
}
footer .menu {
display: flex;
justify-content: center;
}
footer .menu li {
position: relative;
}
footer .menu li::before {
content: "";
width: 3px;
height: 3px;
background-color: #555;
position: absolute;
top: 0;
bottom: 0;
right: -1px;
margin: auto;
}
footer .menu li:last-child::before {
display: none;
}
footer .menu li a {
color: #ccc;
font-size: 12px;
font-weight: 700;
padding: 15px;
display: block;
}
footer .menu li a.green {
color: #669900;
}
footer .btn-group {
margin-top: 20px;
display: flex;
justify-content: center;
}
footer .btn-group .btn {
font-size: 12px;
margin-right: 10px;
}
footer .btn-group .btn:last-child {
margin-right: 0;
}
footer .info {
margin-top: 30px;
text-align: center;
}
footer .info span {
margin-right: 20px;
color: #999;
font-size: 12px;
}
footer .info span:last-child {
margin-right: 0;
}
footer .copyright {
color: #999;
font-size: 12px;
text-align: center;
margin-top: 12px;
}
footer .logo {
margin: 30px auto 0;
}
const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear(); // 2022
<div id="to-top">
<div class="material-icons">arrow_upward</div>
</div>
#to-top {
width: 42px;
height: 42px;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9;
}
const badgeEl = document.querySelector('header .badges');
const toTopEl = document.querySelector('#to-top');
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if (window.scrollY > 500) {
// 배지 숨기기
//gsap.to(요소, 지속시간, 옵션);
gsap.to(badgeEl, .6, {
opacity: 0,
display: 'none'
});
//버튼 보이기!
gsap.to(toTopEl, .2, {
x: 0
});
} else {
// 배지 보이기
gsap.to(badgeEl, .6, {
opacity: 1,
display: 'block'
});
// 버튼 숨기기!
gsap.to(toTopEl, .2, {
x: 100
});
}
}, 300));
// _.throttle(함수, 시간) 시간: 1000 = 1초
toTopEl.addEventListener('click', function () {
gsap.to(window, .7, {
scrollTo: 0 // scrollTo Plugin
});
})