初心者でも無料版でもできるスムーススクロール～テーマに追加できるカスタム方法①

スムーススクロールとは
設置方法
- html
- css
軽く説明
- #btn-topは丸い円
  - 位置の指定
  - 背景色
  - 円
  - サイズ
  - 透明度
- #btn-top a:afterは矢印
  - 回転
  - js
まとめ

スムーススクロールとは

スムーススクロールとはアンカーリンクをクリックするとページ内の目的の場所にアニメーションで滑らかに移動する機能のことです。

このブログでは2種類のスムーススクロールを設置しました。

目次のリストをクリックしたとき
- 上の目次です
TOPに戻るボタンをクリックしたとき
- 画面右下

設置方法

自分は、はてなの無料会員なのでスマホの方は対応出来てませんが、同じようにやればスマホもできると思います。（すみません）

html

ソースを然るべき位置に貼り付けます。
ダッシュボード→デザイン→カスタマイズ→フッタ

<div id="btn-top"></div>

css

ダッシュボード→デザイン→カスタマイズ→デザインCSS

#btn-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    background: #256fba;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    opacity: 0.6;
}
#btn-top a {
    display: block;
    position: relative;
}
#btn-top a:after {
    position: absolute;
    top: 19px;
    left: 16px;
    margin: auto;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

軽く説明

#btn-topは丸い円

位置の指定

position: fixed;
right: 10px;
bottom: 10px;
z-index: 1;

背景色

background: #256fba;

円

border-radius: 50%;

サイズ

width: 48px;
height: 48px;

透明度

opacity: 0.6;

#btn-top a:afterは矢印

回転

ms-transform: rotate(315deg);
webkit-transform: rotate(315deg);

transform: rotate(315deg);

#btn-topのback-groundが矢印の背景色になります。

その為、こちらの色をご自身の任意の色に変えてください。

js

ダッシュボード→デザイン→カスタマイズ→デザインCSS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // TOPへ戻るスムーススクロール
    $(function(){
　　var $win = $(window);
    function topSmoothScroll(){

        var topBtn = $('#btn-top');
        var scrTop = $win.scrollTop();
        //　初期状態は非表示
        topBtn.hide();

        $win.scroll(function(){
            //　TOPから200px以上スクロールしたら表示
            if($(this).scrollTop() > 200){
                topBtn.fadeIn();
            }else{
            //　TOPから200px以下非表示
                topBtn.fadeOut();
            }
        });
        // ボタンをクリックしたときのアニメーション
        topBtn.click(function() {
            $('html,body').animate({
                scrollTop: 0
            },500);
            return false;
        });
    }
    topSmoothScroll();

    // ページ内スムーススクロール
    function targetSmoothScroll(){
        $('a[href^=#]').on('click', function() {
            if ($(this).attr('href') === '#') {
                return;
            }
            // スクロールの速度
            var speed = 500;
            // アンカーの値取得
            var titleHref = $(this).attr('href');
            // 移動先を取得
            var target = $(titleHref === "#" || titleHref === "" ? 'html' : titleHref);
            // 移動先を数値で取得
            var position = target.offset().top;
            // スムーススクロール
            $('html, body').animate({
                scrollTop: position
            },speed);
            return false;
        });
    }
    targetSmoothScroll();
        
    });
</script>

jsの説明は省きます。コメントアウトで簡単に書いてあるのでそちらを参照ください。