クイックキャンパスネット講座で作成した★茶屋登録ページ.ボタンを押してページ上部の「ScrolTo」を書きます

HTML

-Google "material-icons"を使用して上向き矢印ボタンを追加
-gsap cdnリンクにScrollToPluginのhead tagへのリンクが追加されました

  
<div id="to-top">
  <div class="material-icons">arrow_upward</div>
</div>

JS

画面上部にバッジが見えるとボタンが見えなくなり、バッジが消えるとボタンが画面に見えるようにするために、以前に作成した「バッジ」に関するaddEventListenerメソッドに接続して作成します.
- const toTopEl = document.querySelector('#to-top'); > toTopElという変数にメソッドを割り当てるのは、「to-top」というIDを選択するメソッドです.
-バッジが見えないエリア(display:"none")の真下にあるgsap.ボタンの表示を制御するためにto(toTopEL,.2,{})が記述されている.

gsap.to(toTopEl, .2, {x: 0}); > アニメーションを追加するtopという要素を探します.アニメーションの持続時間は0.2秒です.x軸を追加する移動値(0 pxから->100 pxへ)

を示します.
-バッジが見えるエリア(display:「block」)の真下にあるgsap.ボタンを隠すためにtoを作成

gsap.to(toTopEl, .2, {x: 100}); > アニメーションを追加するtopという要素を探します.アニメーションの持続時間は0.2秒です.x軸の移動値が100 px(始点0 px)であることを示す

- toTopEl.addEventListener(「click」,function(){}>ボタン移動の関数を作成しました.

イベントの最初のパラメータ:clickイベント、2番目のパラメータ:関数(to-topという要素をクリック)

const toTopEl = document.querySelector('#to-top');

window.addEventListener('scroll', _.throttle(function () {
    console.log(window.scrollY);
    if(window.scrollY > 500) {
        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));


toTopEl.addEventListener('click', function () {
    gsap.to(window, .7, {
        scrollTo: 0
    });
});

CSS

-to-topクリエイティブ要素のスタイルをくれました.

 
#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;
}