コンテンツにスキップ

Top

MkDocsにページトップに戻るボタンを追加

スクロールで下まで言った時にトップに戻るボタンが欲しかったので追加した。

1. jQueryのインポート

<head>タグ内にjQueryのjsを入れる。

$ vi custom_dir/base.html
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. md-content直下にページトップに戻るボタンを設置

body内のどこか(今回はmd-content内)にボタンを設置した。
なお、アイコンも適当に設定した。 

$ vi custom_dir/base.html

          <div class="md-content">
            <p class="pagetop"><a href="#wrap"><i class="far fa-hand-point-up"></i> Top</a></p>

3. CSSファイルの設置

3-1. CSSファイルの読み込み

自作のCSSファイルを読み込む設定をしていなかったら以下を追加すること。 

$ vi mkdocs.yml

extra_css:
    - 'css/custom.css'

3-2. ボタンのCSS

$ vi docs/css/custom.css

.pagetop {
    display: none;
    position: fixed;
    bottom: 60px;
    right: 30px;
    border-radius:15px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 24px;
    text-decoration: none;
    padding: 5px 10px;
        filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    padding:5px 10px;
        filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

4. JavaScriptの設置

4-1. JavaScriptファイルの読み込み

自作のJavaScriptを読み込む設定をしていなかったら以下の設定をすること。 

$ vi mkdocs.yml

extra_javascript:
    - 'javascripts/custom.js'

4-2. ボタン用JavaScript

$ vi docs/javascripts/custom.js

$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});

以上。
ある一定のスクロールをすると右下にトップへ戻るボタンが表示されるようになる。