初心者でも無料版でもできるスムーススクロール~テーマに追加できるカスタム方法①
スポンサードリンク
目次
スムーススクロールとは
スムーススクロールとはアンカーリンクをクリックするとページ内の目的の場所にアニメーションで滑らかに移動する機能のことです。
このブログでは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の説明は省きます。コメントアウトで簡単に書いてあるのでそちらを参照ください。
まとめ
どうでしたでしょうか。皆さんできたでしょうか。
できねえよ!とかこういうのできる?とかあれば何なりとコメントとかでお申し付けくださいまし。
もしかしたらこのコーナーラストかもですが。。笑