【コピペでOK】下にスクロールした後, トップへ戻るボタンを表示する方法

2019.04.30 / 更新日：2019.06.10

困ってる人

サイトを見てる時にいちいち上までスクロールして戻るのが面倒
クリックしてトップページに戻るボタンってどうやって作るんだろう？
何か簡単な方法はないかなぁ？

こんにちは、ikuxxと申します。

という事で、今回作るトップページに戻るボタンがこんな感じ ↓

画面の白い部分を下にスクロールすると、ボタンが現れます。

See the Pen
qwwbqo by よろろぐ / Yololog (@malg_tw)
on CodePen.

【コピペでOK】下にスクロールした後, トップへ戻るボタンを表示する方法

ボタンのデザインなんかを変える時は「CSS」部分を変える必要がありますが、

それ以外は、基本的には全てコピペでOK。

HTML部分

<div id="top-btn">TOP</div>

1	<div id="top-btn">TOP</div>

【CSS】

// CSS部分

#top-btn {
	position: fixed;
	display: inline-block;
	bottom: 30px;
	right: 40px;
	background-color: #000;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 100px;
}

#top-btn:hover {
	background-color: #333;
	cursor: pointer;
}

// CSS部分

#top-btn {

position: fixed;

display: inline-block;

bottom: 30px;

right: 40px;

background-color: #000;

color: #fff;

font-size: 22px;

font-weight: bold;

padding: 10px 20px;

border-radius: 100px;

}

#top-btn:hover {

background-color: #333;

cursor: pointer;

}

jQuery部分

// jQuery部分

$(function() {

var toppage = $('#top-btn'); // 変数

	toppage.hide(); // まず始めはボタンを隠す

	$(window).scroll(function () {
        if ($(this).scrollTop() > 10) {
            toppage.fadeIn(); // トップから10pxスクロールしたらfadeIn
        } else {
            toppage.fadeOut();
        }
    });

    toppage.click(function(){ // クリックしたら

		$('body,html').animate({
            scrollTop: 0 // TOPまでスクロールして戻る
        }, 500); // 0.5秒かけて
        return false;
    });
});