about

javascriptを使ってサイトのスクロール位置によってCSSを変更させる方法

ホームページをスクロールしたらボタンなどが出てくるサイトなどをよく見かけるようになりましたが、そのようなボタンは少しjavascriptを付け加えるだけで設置することが可能です。少し付け加えるだけですので、今回はjQueryと素のjavascriptの両方で作ってみようと思います。

設置する手順と作業の流れ

  1. バナーやボタンが出たり入ったりするためのCSSの作成
  2. スクロールに合わせてCSSが付いたり外れたりするjavascriptの作成
  3. HTMLの該当の場所にIDやCSSをセットする

CSS

.button-pagetop {
    position: fixed;
    bottom: -100px;
    width: 100%;
    transition: all .5s;
}

.button-pagetop a {
    display: block;
    width: 100px;
    margin: 0 auto;
}

.button-pagetop.js-active {
    bottom: 0;
}

CSSは初期の位置が画面外にセットされるようにして、js-activeクラスがセットされたら画面内に入ってくるように書きます。
逆に画面外に消えていくものを作る場合は、js-activeで消えていくようにすればOKです。

次は、このCSSを制御するスクリプトを書いていきます。

javascript (vanila js)

function scrollFunction() {
    var this_y = window.pageYOffset;
    if (this_y > 240) {
        document.getElementById("pagetop").classList.add("js-active");
    } else {
        document.getElementById("pagetop").classList.remove("js-active");
    }
}
window.onload = function() {
    scrollFunction();
}
window.onscroll = function() {
    scrollFunction();
}

javascript (jQuery)

function scrollFunction() {
    var this_y = $(this).scrollTop();
    if (this_y > 240) {
        $('#pagetop').addClass('js-active');
    } else {
        $('#pagetop').removeClass('js-active');
    }
}
$(window).on('load scroll',function () {
    scrollFunction();
});

上から240ピクセルスクロールしたら、IDのpagetopの場所に「js-active」クラスをセットするスクリプトを設置します。

見ての通り、この位のスクリプトでしたらバニラでもjqueryでも大体同じくらいの量になります。ご利用はお好きな方で。

HTML

<div id="pagetop" class="button-pagetop">
    <a href="#"><img src="./images/button-pagetop.svg" alt="トップに戻る"></a>
</div>

該当のpagetopボタンの場所に、CSSとIDをセットすれば完成です。

これでスクロールしたら画面内にスクロールするボタンを作成することが出来ます。