こんにちわ。Webデザイナーのotarieです。
今回は1枚の縦長のサイトなどでナビゲーションのメニューをクリックした際にスーッと気持ちよく指定したセレクタの箇所まで移動してくれる動きの方法をご紹介したいと思います。
まずはメニューを作ります。
こんな感じ。
HTMLの<body>…</body>内にnavのコードを入れます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<nav class="navbar navbar-default"> <div class="container"> <!-- LOGO --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myDefaultNavbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-menu-text">MENU</span> </button> <a class="navbar-brand" href="./"><img src="../img/logo_sp.png" alt="Supride サプライド ロゴ" id="sp_logo"></a> </div> <!-- nav --> <div class="collapse navbar-collapse" id="myDefaultNavbar1"> <ul class="nav navbar-nav"> <li><a href="#story">STORY</a></li> <li><a href="#characters">CHARACTERS</a></li> <li><a href="#game">GAME</a></li> <li><a href="#spec">SPEC</a></li> <li><a href="https://www.facebook.com/supride.inc/" target="_blank"><img src="../img/logo_fb.png" style="width:20px" alt="サプライド facebook"/></a></li> </ul> </div> </div> </nav> |
この記述の際、大事なのは<!–nav–>直下の<li>の中に入れたメニューそれぞれに名前をつけて行きます。
<a href=”#story“>STORY</a></li> → ※「＃」を頭につけてね！
次に要素内にも指定して行きます。
ここで気をつけたいのが、要素に「id=”story”」という形で指定して行きますが、この指定された部分を先頭にして、その位置まで行ってくれます。なので、変な場所（要素の途中）で指定すると中途半端な部分に行っちゃうので、綺麗に要素をまとめて指定する事をオススメします。私は要素ごとに<section>で囲んでいます。
|
1 2 3 4 5 6 7 8 9 |
<section id="story" class="story"> <div class="content_story"> <h4>STORY</h4> <p>孤児で、義父、義母（伯父、伯母）に冷遇され、従兄弟等にいじめられているハリー・ポッター少年は、11歳の誕生日に自分が魔法使いであることを知る。<br> ホグワーツ魔法魔術学校へ入学し、いままで知らなかった魔法界に触れ、亡き両親の知人をはじめとした多くの人々との出会いを通じて成長する。<br> そして、両親を殺害したヴォルデモート卿と自分との不思議な因縁を知り、対決していくこととなる。 </p> </div> </section> |
<section id=”story” class=”story”>
<section>内の「id=””」に指定します。「＃」は入れず、大文字、小文字も<nav>で指定したものと同じにしてください。
次にjsファイルを作成します。
下記URLアドレスから「http://code.jquery.com/jquery-1.7.1.min.js」の上で右クリック「リンク先を別名で保存」を選択し、目当てのファイルをゲットします。
URL：https://blog.jquery.com/2011/11/21/jquery-1-7-1-released/
ゲットしたら、HTMLファイルの<head>…</head>内に下記コードを貼り付けます。
|
1 |
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> |
最後に<script>のコードを<head>…</head>内に指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); </script> |
これで完了です！
せっかくのカッコいいサイト。メニューがバッと変わってしまうよりも、スーッと動きのあるスクロールで変わる方が気持ちいいですよね( ´ ▽ ` )
いかがでしたか？
また次回をお楽しみに〜