xhml・html

レスポンシブWebデザイン 1カラムトップメニュー有り 目次

2019年03月21日
ネットビジネス便利ツール】のモバイル対応の続きです。

マニュアルページには目次があります。
写真
目次のリンクをクリックすると該当箇所へ遷移するのですが、ページの上部に常に表示しているトップメニューがあるので、メニューの高さ分ずれた位置に遷移してしまいます。
これを解消しようと思います。

JavaScriptは苦手なので、また参考にいたします。
jQuery とっても簡単、ページ内リンクでスムーズスクロール | 福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン
こちらのソースでやってみたのですが、なぜかうまくいかない時があるのです。気持ち良いほどピッタリ合うこともあれば、とんでもない位置に行ってしまうこともあります。
どうも読み込みのタイミングや、キャシュの関係のような感じでした。

泣く泣く別のページを探してみました。
ページ遷移時のページ内リンクのスムーススクロール
こちらが読み込みの時間を考慮してあるソースで、うまくいきそうな予感がしました。

メニューの高さは考慮されていないので、その部分のソース変更します。
30行目
var position = target.offset().top;

var position = target.offset().top - $('#top_bar').outerHeight();
に変更しました(メニューのidはtop_barです)。

今の処うまく動作しています。
一旦通常のリンク移動をしたあと、じわっとメニュー分下がってくるのがなんとも面白い動きです。

あ、ページ遷移時のページ内リンクのスムーススクロールもjQueryなので、先にjQueryを読み込んでからJavaScriptのソースを読み込んでください。