素のJavaScriptだけでページのトップへ戻るボタン(jQueryなし)

この記事をシェアする

スポンサードリンク

こんにちは、シロマ@mademodeです。

今回はjQueryを使わずに、JavaScriptだけでページの一番上に戻るボタンを実装します。

ページ内リンクのようにパッと戻るのではなく、スルスルと滑らかにスクロールさせます。

正直スクロールの操作はjQuery結構便利ですが、読み込み時間がかかるので使いたくないですね。

ということで素のJavaScriptで実装します。

DEMO

コード

HTML

<button class="scroll-top" id="js-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>

Font Awesome アイコンが読み込まれている前提です。ここは画像なり文字なりに置き換えてもかまいません。

ボタンはbutton要素でマークアップします。

CSS

.scroll-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 100;
background-color: #999;
opacity: .8;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
color: #fff;
}
.scroll-top:hover {
cursor: pointer;
}

右下にボタンを配置します。色とか大きさは適当に変えて下さい。

JavaScript

scrollTop('js-button', 500);
function scrollTop(elem,duration) {
let target = document.getElementById(elem);
target.addEventListener('click', function() {
let currentY = window.pageYOffset; 
let step = duration/currentY > 1 ? 10 : 100;
let timeStep = duration/currentY * step;
let intervalID = setInterval(scrollUp, timeStep);
function scrollUp(){
currentY = window.pageYOffset;
if(currentY === 0) {
clearInterval(intervalID);
} else {
scrollBy( 0, -step );
}
}
});
}

これはいくつか解説が必要ですね。

JavaScriptの解説

scrollTop('js-button', 500);

第一引数にはid名を指定。第二引数はTOPに到達するまでの時間。500msなので0.5秒でTOPに到達します。

let currentY = window.pageYOffset;

まずは、現在のスクロール量を取得します。

let step = duration/currentY > 1 ? 10 : 100;

変数stepは一回スクロールする量です。時間に対して距離が短い場合は10pxずつスクロールさせます。
距離が長い場合は100pxずつスクロールさせます。

1pxずつスクロールさせると諸事情によりうまく動作しないので、10pxとか100pxずつスクロールさせます。

let timeStep = duration/currentY * step;

変数timeStepには、何秒に一回スクロールするかを代入しています。

 

これでjQueryなしで実装できますが、easingの設定はできません。一定の速度でスクロールされる感じです。

トップに戻る動きにeasingは必要ないでしょう。

 

ページトップに戻るボタンの実装方法はいくつかあるので、色々試してみて下さい。

スポンサードリンク

<CSSだけで画像の色が反転したように見せる

WordPressで会員サイトが構築できるプラグイン「WP-Members」>

この記事をシェアする