するするスクロールするページの作り方

ハイかイイエか!

この記事は約4分で読むことができます。

久しぶりにJavascript入りのページを作成。

と言うより、開業時の許認可の必要の有無」がわかるYES/NOフローチャート。前々から作りたいと思ってたんですが、そういった機能のCGIはなし。かと言って1ページ1ページHTMLを作成するのも面倒なので放置。

アンカータグ「A」と属性の「name」で作れるかな?と検討していたところ、縦長ページにはなるものの、1ページ内で完結できそうだったので、やってみることに。

が、動きが1990年代式で、まったく面白くなかったので、するするスクロールする機能をつけてみたところ、まぁハマっちゃって、朝から番までスルスルして過ごすことに・・・

できたのがこのページ↓

開業前の許認可YES/NOチャート

内容のできは別にして、するするスクロールが気持いいじゃないですか。人によっては吐きそうになるかな?

やり方は、とっても簡単。

1.<head>~</head>内にJavascript関係のコードをコピペ
2.リンク先を<a name=""></a>ではなく、<span id="◯◯">などと書く。 
(「<a name="" id=""></a>」でも可)

はりつけるのは以下のコード。

<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>

「どういう仕組みになっているか?」とか考えだすと、わけがわからなくなるので、こういうテクニックはコピペするのが一番ですね。

訪問者の滞在率を上げる裏ワザ!

にはならないでしょう。