リンクをクリックしたらページ下部へ移動したり、
指定の位置へするするとスクロールするアレのやり方です。
どうも、どらたんです。
普通のブログだったりワードプレスなんかでも、
下の方に「ページ上部へ」みたいなリンクがありますが、
あのするする感を自分で好きなところへ持って行けるようにするやり方です。
口で言っても伝わりにくいと思うので、
まずはこちらをクリックしてみください。
↓↓↓
ダ
ァ
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
｜
！
とまぁこんな感じです。
やり方は結構簡単なのでぱぱっと説明しますね。
目次
htmlにコードを追加する
まずは準備です。
htmlの<head>～</head>内に以下のコードを追加します。
[deco_bg image=”paper1″ width=””]<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script><script type=”text/javascript”>
$(function(){
$(‘a[href^=#]’).click(function(){
var speed = 1000;
var href= $(this).attr(“href”);
var target = $(href == “#” || href == “” ? ‘html’ : href);
var position = target.offset().top;
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});
</script>
※全部コピーして貼り付ければOK
※「var speed = 1000;」の部分の数値を変えればスピード変えられます。
（数値を減らせば早く、増やせば遅くなります。）
ちなみにheader.phpの<head>～</head>内ならどこでもいいんですが、
入れる場所がわかりにくい・どこにいれたか忘れるかも、、、
なんて場合はアクセス解析タグが挿入されてる場所でもOKです。
リファインスノーならanalytics.phpのところですね。
僕はわかりやすいのでこっちに入れてます。
これで準備はOKです。
記事内にタグを入れる
後は記事内の飛ばしたい場所に目印のタグを入れて、
スタート地点にリンクタグを置くだけでOKです。
スタート地点のリンクタグはこんな感じ
↓↓↓
<a href=”#スムース“>元気があれば何でもデキル</a>
飛ばす場所の目印タグはこんな感じ
↓↓↓
<div id=”スムース“>元気デスカァーーー！</div>
テキストは別々に変えてもいいですが、
黄色線の部分は同一にする必要があるので注意です。
シリウスで使用する場合
シリウスでスムーススクロールを使用する場合、
「編集」タブから「htmlテンプレート」を開いて編集すればOKです。
また、さっきと同じように分かりにくい場合は
アクセス解析タグの場所に入れちゃうのもアリです。
で、後は記事の使う場所にタグを入れるって感じですね。
もっと簡単なやり方-するするしないバージョン
html編集とかコードを入れるのがよくわからない、めんどくさいという場合、
ネームタグを使うだけでも指定の場所に飛ばすことができます。
※ただ、この場合はスクロールはせずに、
パッと移動する感じになっちゃいます。
タグの入れ方は上と一緒です。
スタート地点のリンクタグ
↓↓↓
<a href=”#アンカー名”>～</a>
飛ばす場所の目印タグ
↓↓↓
<a name=”アンカー名”></a>
上の二つをそれぞれの位置に入れればOKです。
ネームタグを使うとこんな感じ。
クリックしてください
↓↓↓
ハッ！！！！
とまぁこんな感じです。
これの場合、htmlを編集してコードを入れたりってことをしなくても、
記事にタグを入れるだけで使えるので、楽っちゃ楽です。
また、このするするがうっとうしいって場合もあるかもしれないので、
そういう場合に使うっていうのでもいいかもしれませんね。
備考
目印タグを使う場合、思ってた位置より少しずれてしまうこともあるかもしれませんが、
そういう時は、タグにテキストを入れずに置いておくってこともできるので、
そんな感じで調整していくと良いかと思います。
つまり、目印タグを上の方に置いて、
↓↓↓
<div id=”スムース”></div>
ここに見せたい文章・画像を持ってくる
みたいな感じでずらすってことですね。
ちなみに”スムーススクロール”と”スムーズスクロール”の
両方の言い方があるみたいで、どっちが正しいのか調べてみたところ、
どっちでもいいみたいですね。
以上、パパッと説明するつもりが
余計にややこしくなっちゃった気がしますが、
わからないところがあれば聞いてくださいね。
↓↓↓
s
e
e
y
o
u
s
o
o
n
またね！