ページ上部に移動
8593 ワード
GSAPとScrollToプラグインを使用して、ページ上部のボタンを作成します.
既存のJSを利用して,少量のコードを追加するだけで実現できる.
コード#コード#
HTML
<div id="to-top">
<div class="material-icons">arrow_upward</div>
</div>
CSS
#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;
}
JS
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if (window.scrollY > 500) {
// gsap.to(요소, 지속시간, 옵션);
gsap.to(badgeEl, 0.6, {
// 배지 숨기기
opacity: 0,
display: 'none'
});
gsap.to(toTopEl, 0.2, {
// 투 탑 나타나기
x: 0
});
} else {
gsap.to(badgeEl, 0.6, {
// 배지 보이기
opacity: 1,
display: 'block'
});
gsap.to(toTopEl, 0.2, {
// 투 탑 숨기기
x: 100
});
}
}, 300));
// _.throttle(함수, 시간)
toTopEl.addEventListener('click', function() {
gsap.to(window, 0.7, {
scrollTo: 0
});
});
Reference
この問題について(ページ上部に移動), 我々は、より多くの情報をここで見つけました https://velog.io/@rkde8938/페이지-상단으로-이동GSAPScrollToテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol