jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール】です。通常のスムーズスクロールですとページ内にアンカーを設定しjQueryにて高さ取得&スクロールという手順ですが、本記事ではページ遷移と組み合わせ遷移後に特定箇所へスムーズスクロールさせます。基本的な部分のみですのでこのままでは微妙です、参考程度にご活用ください。 実装方法 実装方法は至ってシンプルです。まずは遷移後にスクロールするサイト（ここではB.html）へのリンクをA.htmlに記述します。 HTML（A.html） <a href="B.html?id=white">LINK</a> <a href="B.html?id=black">LINK</a> <a href="B.html?id=red">LINK<
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方
上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。 フッターでjsファイルを読み込んで実行コードを書くあとはフッターの、</body>タグ手前あたりに以下のように記入します。 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> --> <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.clingify.js"></scr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
