久しぶりにJavascript入りのページを作成。
と言うより、開業時の許認可の必要の有無」がわかるYES/NOフローチャート。前々から作りたいと思ってたんですが、そういった機能のCGIはなし。かと言って1ページ1ページHTMLを作成するのも面倒なので放置。
アンカータグ「A」と属性の「name」で作れるかな？と検討していたところ、縦長ページにはなるものの、1ページ内で完結できそうだったので、やってみることに。
が、動きが1990年代式で、まったく面白くなかったので、するするスクロールする機能をつけてみたところ、まぁハマっちゃって、朝から番までスルスルして過ごすことに・・・
できたのがこのページ↓
内容のできは別にして、するするスクロールが気持いいじゃないですか。人によっては吐きそうになるかな？
やり方は、とっても簡単。
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>
「どういう仕組みになっているか？」とか考えだすと、わけがわからなくなるので、こういうテクニックはコピペするのが一番ですね。
訪問者の滞在率を上げる裏ワザ！
にはならないでしょう。
