1ページ完結で縦長のスクロールするサイトでよく使われている、スクロールしてもナビゲーションをページ内に残して各コンテンツにスムーススクロールするjQueryプラグイン「smint」というのがシンプルで使い勝手がよさそうだったんですが、ちょっと気になった箇所があったので修正してみました。
smintのサイトのデモを見てのとおり、ページをスクロールしてもナビゲーションはページ内に残ってユーザービリティを向上するスクリプトです。
スクリプトもシンプルで導入も簡単なんですが、メニューのidをキーにしてリンク先のclassを指定するというのがちょっと使い勝手がわるそうだったので、スタンダード（自分好み？）に各コンテンツ指定したidをキーにメニューからハッシュで飛ばすようにしました。
導入方法はほぼ同じでcssとjQueryとsmint.jsを読み込んで、固定配置したいナビゲーションのidに対してsmintを実行させるだけです。詳しくはsmint（How do I use it?）の導入方法を参考にして下さい。
ハッシュ指定にした以外に、よりシンプルにタグを減らしたり、リサイズにも対応してiOSとAndroidでも表示が崩れないように調整してあります。
zipでまとめておいたので気になった方はご自由にダウンロードして下さい。
2014/07/16 追記—————————————————————————-
コメントから要望を頂いたので本家に合わせてコンテンツ位置に合わせてメニューも切り替わるようにしました。（上のDEMOから確認できます）
メニューのidに”nav_”+リンク先を指定する事で連携されるようになってます。
ただ元のSMINTのメニューとコンテンツとの連携で不具合（ページの一番上からでないと正常動作しないなど）があるので、ちょっと実用には微妙な所です。
自分も普段はSMINTを使わずjQueryで直書きしてメニューとナビゲーションの連携にはwaypoint.jsを使っています。
なので自己責任で参考程度に利用して頂けると幸いです。
改良版をダウンロードしたい方は以下からダウンロードして下さい。
時間がある時にでも同機能のをちゃんと作りなおそうかと思います。
しかし一年前でもなんでこんな風に？と思う所が結構ありますなぁ。
Smintの元のデータはうまく読み込めませんでしたが
こちらの改修版を使わせていただいたらできました。ありがとうございました。
お役に立てたようでなによりです！
こちらの「改修後：KARA-FULL版」がシンプルで使い勝手が良さそうだったので、以前作成したページに導入してみました。一日かけてようやくできて喜んでいます！ありがとうございます。
ところで、元のSmintにあるような、スクロールしたときに、アクティブ（カレント）ページに対応してナビゲーションメニューが変化するようするにはどうしたらよいでしょうか？
元のSmintのjsファイルとこちらの「改修後：KARA-FULL版」を見比べたところ、「.active」クラスを追加して・・・・云々ということは漠然とわかったので、何となく該当箇所らしきところをコピーして貼付けてもうまくいきませんでした。
JSは素人のため、詳しく教えていただけると助かります。
欲張ってしまってすみません。何卒ご教授くださいませ。よろしくお願いいたします。
コメントありがとうございます。
上にメニューとの連携版をアップしておきましたのでよければご利用下さい。
本家を参考に簡単に改良してみましたが元コード自体でちょっと不具合があったので参考程度にしておくといいかと思います。
本家はメニューを減らしたりすると
全然動かなくなってしまってこまっていたところ
こちらを拝見しました。
とても使い勝手が良く改良されていて
改良版DOWNLOADをダウンロードさせて頂きました☆
早速使わせて頂こうとしたところ
内容がメニューとの連携版でなかったので
厚かましいお願いで申し訳ないのですが^^;
連携版の再度アップをお願いしても良いでしょうか
コメントありがとうございます。
失礼いたしました！ダウンロードのリンク先が間違っていました…。
修正したのでダウンロードしてみてください。
ありがとうございます！！！
本当に助かりましたヽ(´∀｀*)ﾉ
リクエストに応えていただき、本当にありがとうございました！
また、紹介してくださった「waypoint.js」も参考に見てみたいと思います。
さらなる改良版（？）も楽しみにしています。
お礼が遅くなってしまいましたが、心よりお礼申し上げます。m( _ _ )m