こんばんわ。
【福岡｜ブログライフを変えるプロ】簡単アメブロ集客の住福です。
今日は記事が長いとか、メニューが多い人用の小ワザをご紹介いたします。
ちなみにＨＰなどを作るときにも使えますよ＾＾
美しすぎる記事内ジャンプ
まぁとりあえずこのボタンを押してみてください！
あ
ぁ
ぁ
ぁ
ぁ
ぁ
れ
ぇ
ぇ
ぇ
ぇ
ぇ
ぁ
ぁ
ぁ
ぁ
ぁ
れ
ぇ
ぇ
ぇ
ぇ
ぇ
シュタッ！
とまぁこんな感じで「ボタンを押すだけで、記事内の指定した位置にジャンプできるようになります。」
やり方
まず準備として、プラグインに二つのコードを設置します。これはスムーズにスクロールを見せるためのコードです。
１、jQueryスクリプトファイル設置
まずは「jQuery」のスクリプトファイル（JavaScript）を利用するため、次のように1行を追加します。すでに書かれている方はやらなくても大丈夫です。
基本的にJavaScriptはプラグインの先頭に書くといいですよ。
（コピペでOK）
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
２、スムーズスクロールのスクリプト設置
１を記述したら、必ずそれより下の部分にこのコードを貼り付けます。
なお「var speed = 900」というところがスクロールのスピードでして、小さくするほど早くなります。
（コピペでOK）
＆LT;スクリプトタイプ= ＆QUOT;テキスト/ javascriptの＆QUOT;＆GT;
//ページ内リンク、＃の非を表示。スムーズスクロール
$（ '[のhref ^ =＃] '）。（（クリック機能）{
VAR速度= 800;
のvarのhref = $（この）.ATTR（＆QUOT;のhref ＆QUOT;）;
（？HREF == ＆QUOT;＃＆QUOT; ||のhref == ＆QUOT; ＆QUOT; 'htmlの'：HREF）のvarターゲット= $;
VAR位置= target.offset（）トップ。
$（＆QUOT; HTML、ボディ＆QUOT;）アニメーション化（{のscrollTop：位置}、スピード、＆QUOT;スイング＆QUOT;）。;
falseを返します。
}）;
＆LT; /スクリプト＆GT;
//ページ内リンク、＃の非を表示。スムーズスクロール
$（ '[のhref ^ =＃] '）。（（クリック機能）{
VAR速度= 800;
のvarのhref = $（この）.ATTR（＆QUOT;のhref ＆QUOT;）;
（？HREF == ＆QUOT;＃＆QUOT; ||のhref == ＆QUOT; ＆QUOT; 'htmlの'：HREF）のvarターゲット= $;
VAR位置= target.offset（）トップ。
$（＆QUOT; HTML、ボディ＆QUOT;）アニメーション化（{のscrollTop：位置}、スピード、＆QUOT;スイング＆QUOT;）。;
falseを返します。
}）;
＆LT; /スクリプト＆GT;
３、記事内にリンクを貼る
たとえばメニューや問合せボタンなどの項目にリンクを設置します。
このタグで囲めばOKで、「#link1」の数字の部分を変えれば何個でも設置可能です。
「～のリンク」の部分に好きな文言を入れます。画像なら画像のURLでも大丈夫です。
<a href="#link1">1のリンクです</a>
<a href="#link2">2のリンクです</a>
<a href="#link2">3のリンクです</a>
<a href="#link2">2のリンクです</a>
<a href="#link2">3のリンクです</a>
４、アンカーを設置する
要は、ジャンプ先ですね。ジャンプさせたい文言の１～２行上に設置するとバランス良くなりますよ＾＾
<p id="link1">1はここにジャンプしてきます</p>
<p id="link2">2はここにジャンプしてきます</p>
<p id="link2">3はここにジャンプしてきます</p>
<p id="link2">2はここにジャンプしてきます</p>
<p id="link2">3はここにジャンプしてきます</p>
以上です。
用途としては目次から飛ばすってのが多いでしょうね。
もしくはこういうサイトで、申し込みボタンからの申し込みフォームへひとっ飛びってのでしょうね。
↓ サイトでこのボタン見つけたら押して見てください。
では。
今日もありがとうございました＾＾
またあした♪
「販売力のあるブログの作り方」をお伝えしています。
↑ バナークリックでご登録 ↑
↑ バナークリックでご登録 ↑
Next Innovation 住福 純