【はてなブログ】ページトップへ戻るボタンを実装する【脱jQuery】

はてなブログで、ページトップへ戻るボタンを実装したので、備忘録がてら、方法を紹介したいと思います。

本ブログでは右下に配置しているので、ボタンを押して使用感を確かめてみてください。

紹介する方法は、jQueryを使用しないもので、WordPressなどのはてなブログ以外でもコピペのみで実装可能となっています。

実装方法

ブログの設置さんの記事を参考にさせていただきました。リンクを記載しておきます。

flex-box.net

HTML

Font Awesomeを使用しているので、読み込みをしていない方は<i>タグを「^」など文字に置き換える等してください。

はてなブログで実装の場合、以下のコードをフッタ*1などに追記します。

<div id="page-top-button" class="page-top-button">
    <i class="fa-solid fa-angles-up"></i>
</div>

CSS

はてなブログで実装の場合、以下のコードをデザインCSS*2や<style>タグをつけてフッタなどに追記します。

.page-top-button {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #dddddd;
    color: #ffffff;
    line-height: 50px;
    text-align: center;
}
    
.page-top-button:hover {
    opacity: 0.7;
    cursor: pointer;
}

JavaScript

はてなブログで実装の場合、以下のコードを<script>タグをつけてフッタなどに追記します。

const pageTopButton = document.getElementById('page-top-button');
pageTopButton.addEventListener('click', () => {
    window.scrollTo( {
        top: 0,
        behavior: 'smooth'
    });
});

合わせて読みたい

cxememo.com

cxememo.com

*1:「デザイン」→「カスタマイズ」→「フッタ」で遷移

*2:「デザイン」→「カスタマイズ」→「デザインCSS」で遷移