Q&A
jQuery Slidebars
上記のプラグインを使っておりますが、
メニューをクリックしたところ、ページ内リンクに飛ばなくなりました。
問題点
・スムーススクロールを使っていますが、ほかの部分ではちゃんと動作できています。
・jQuery Slidebars を使って、ページ内リンクをしていますが、きれいにスムーススクロールを使ってページ内リンクを飛びたい。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デモサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="" /> <meta name="keywords" content="" /> <!-- Favicon # --> <link rel="shortcut icon" href="./favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon"> </head> <body> <!-- Menu Button # --> <button class="js-toggle-right-slidebar">Menu</button> <div canvas="container"> <header role="banner"> <h1>サイトの名前</h1> <h2>サイトの要約</h2> </header><!-- # Header --> <main role="main"> <heade> <h1>ページ内のタイトル</h1> </header> <article> <section id="page01" name="page01"> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> </section> <section id="page02" name="page02"> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> </section> <section id="page03" name="page03"> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> </section> <section id="page04" name="page04"> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> <p>sample textsample textsample textsample textsample textsample textsample text sample text</p> </section> </article> </main> <footer> <small id="copy">Copyright(c) demosite all rights reserved.</small> </footer> </div> <nav id="slidebar" role="navigation" off-canvas="slidebar-2 right shift"> <ul> <li><a href="#page01">Page 01</a></li> <li><a href="#page02">Page 02</a></li> <li><a href="#page03">Page 03</a></li> <li><a href="#page04">Page 04</a></li> </ul> <button class="nav_close js-close-right-slidebar">Close</button> </nav> <link rel="stylesheet" type="text/css" href="./slidebars.css" media="all"> <!-- Script # --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Slider Menu # --> <script src="./slidebars.js"></script> <script src="./scripts.js"></script> <!-- Smooth Scroll # --> <script type="text/javascript"> $(function(){ var headerHight = 0; //ヘッダの高さ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 500; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 //var position = target.offset().top; var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </body> </html>
ご教授お願いいたします。
以上
あなたの回答
tips
プレビュー
