FC2ブログのページ内リンクをスムーズスクロールさせてみよう - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:https://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログのページ内リンクをスムーズスクロールさせてみよう

20161129.jpg
最近はブログやホームページでのスムーズスクロールはどんなページでも見かけるようになりましたね。
このブログでも上へ戻るスムーズスクロールは実装していたんですが、
ページ内のリンクをスムーズにスクロールすることはしていなかったので、
今回はページ内のリンクをクリックしたときに滑らかに移動させてみよう。

スムーズスクロールとは


スムーズスクロールとはページ内アンカーに滑らかにスクロールして移動する演出のことです。
最近ではページ内リンクを飛ばす際には当たり前のようにブログやホームページに実装されていますね。

FC2ブログにページ内リンクをスムーズスクロールさせる方法


HTML
head内でjQueryを呼び出しましょう。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

※すでにjQueryを呼び出してる場合は上記は必要ありません。
続いて、<head></head>内に下記のスクリプトを書きましょう。
<script type="text/javascript">
$(function(){
$('a[href^=#]').click(function() {
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>

var speed = 500; のところは、スクロール移動時の速度を指定できます。
数字が大きくなるほど、ゆっくり動きます。

これで、ページ内のリンクであればスムーズスクロールしてくれます。

お疲れ様でした。
この記事を読んだ人はこんな記事も読んでます



Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/126-cbcd46dc

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。