どうも、ソエです。
今回は、サイトに必ずと言っていいほどある、トップボタンの仕掛けを作ってみました。
では、どうぞ。
トップに戻るボタン
今回は、CSSは関係ないのでHTMLとJavaScriptのコードだけ書きます。
サンプル
ここをクリックすると、トップに戻ります。
HTML
<div class=”top”>
ここをクリックすると、トップに戻ります。
</div>
ここをクリックすると、トップに戻ります。
</div>
JavaScript
window.scrollToというので、ウィンドウをスクロールさせています。
それをaddEventListenerで囲うことで、クリックしたら反応するようにしています。
behevior:”smooth”で動きをスムーズにしています。
let topbt = document.querySelector(“.top”);
topbt.addEventListener(“click”,function(){
window.scrollTo({
top: 0,
behavior: “smooth”
});
});
終わりに
いかがでしたか？
難しいと思いきや、簡単ですよね。
初めて知ったときは驚きました。
簡単なので、ぜひつかってみてください。
では、ご閲覧ありがとうございました。
