JavaScript(jQuery)で画面自動スクロールを実現してみる

2020年5月16日

今回は、JavaScript(jQuery)で画面自動スクロールを紹介しようと思います。

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第12回目！　自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

それではいってみましょう！

1. ソースコード
2. 最後に

ソースコード

実際のコードがこちら。自作Webアプリから持ってきました。コピペでOK！

 <p id="page-top"><a href="#wrap">⬆︎</a></p>//①

    /*画面上部に戻るためのスクロールボタン  */
    var topBtn = $('#page-top');    
    topBtn.hide();
    //スクロールが800に達したらボタン表示
	//この800を変化させてカスタマイズ可能
    $(window).scroll(function () {
        if ($(this).scrollTop() > 800) {
            topBtn.fadeIn();//表示される
        } else {
            topBtn.fadeOut();//表示をなくす
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0//スクロール先
        }, 500);
        return false;
    });

簡単な説明はコメントを見てください〜。なげやり？？笑　