どうも、ソエです。

今回は、サイトに必ずと言っていいほどある、トップボタンの仕掛けを作ってみました。

では、どうぞ。

トップに戻るボタン

今回は、CSSは関係ないのでHTMLとJavaScriptのコードだけ書きます。

サンプル

ここをクリックすると、トップに戻ります。

HTML

<div class=”top”>
ここをクリックすると、トップに戻ります。
</div>

JavaScript

window.scrollToというので、ウィンドウをスクロールさせています。
それをaddEventListenerで囲うことで、クリックしたら反応するようにしています。
behevior:”smooth”で動きをスムーズにしています。

let topbt = document.querySelector(“.top”);

topbt.addEventListener(“click”,function(){
window.scrollTo({
top: 0,
behavior: “smooth”
});
});

終わりに

いかがでしたか?

難しいと思いきや、簡単ですよね。
初めて知ったときは驚きました。

簡単なので、ぜひつかってみてください。

では、ご閲覧ありがとうございました。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ JavaScript/

トップに戻る仕掛けをJavaScriptを利用して作る