【プログラミング・Web制作勉強ログ#86】6/2の積み上げ成果

    <!-- Go-top-button -->
    <div id="go-top">
        <img src="images/go-top-button.svg" alt="go-top-button1">
        <img src="images/go-top-button_green.svg" alt="go-top-button2">

/* ------------
Go-top-button
-------------- */
#go-top {
    position: relative;
    width: 68px;
    height: 68px;
    background-color: $mainColor;
    border-radius: 50%;
    position: fixed;
    bottom: 60px;
    right: 60px;
    z-index: 50;
    &:hover {
        background-color: $white;
        cursor: pointer;
        img {
            opacity: 0;
        }
    }
    img {
        z-index: 1;
        position: absolute;
        width: 23px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    img:nth-of-type(2) {
        z-index: -1;
        opacity: 1;
        position: absolute;
        width: 23px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

//Go-top-button（FVから下にスクロールしたら画面右下にトップへ戻るボタンが登場しそのまま固定させる）
    // 変数宣言と代入
var goTop = $("#go-top");
    // サイト上部ではボタンを非表示
goTop.hide();
        // 100pxスクロールしたらボタン表示・100px以下ならボタン非表示
$(window).scroll(function () {
  if ($(this).scrollTop() > 800) {
    // 0.5秒でフェードイン
    goTop.fadeIn(500);
  } else {
    // 0.5秒でフェードアウト
    goTop.fadeOut(500);
  }
});