ページ内リンクをする方法

同一ページ内で遷移するタグの書き方。

画像、もしくは、文字を押すことでページ内の任意の場所へ遷移させる記述


これは、ユーザービリティの面で便利なので効果的です。おそらくGoogleにも高評価と思われます。

「コチラですよ」という文字列をクリックすると、「注目ですよ」という部分にページ内リンクさせる方法



<a href="#コチラですよ">コチラですよ</a>

と書いて、クリックすると、

<a name="コチラですよ">注目ですよ</a>

の部分に飛びます。

コチラですよ










画像の移動も出来ましたね



という感じでページ内の上の部分にも飛べます。
記述は、

<a name="画像ですよ"><img src="http://mazi-affiliate.com/img/sozai/01009.gif" /></a>

ですね。

ドロッとした移動もできる


今のページ内リンクは瞬時に移動する動きでしたが、スクロールする動きもできるようです。
ただ、これはスクリプトが必要になってくるので、若干難しいです。

HTMLテンプレートのheadタグの中に記述する必要があります。
記述だけ書いておきます。



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(function($) {
$('a[href^=#]').click(function() {
var speed = 500;
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>


<a href="#あああ">クリックする所</a>

<p><section id="あああ"></section></p>
↑移動場所




























飛んできました↓


注目ですよ

飛んできたでしょ?上の部分のところに飛んでくる記述になってます。

<a name="コチラですよ">注目ですよ</a>

画像でもできます。


<a href="#注目ですよ"><img src="http://mazi-affiliate.com/img/sozai/02006.gif" /></a>

と書いたのが下のニコニコマークです。クリックしてみてください。

コメントは下のボタンを押して別ウィンドウから投稿できます。