スムーススクロール移動先を調整する設定(ヘッダー上部固定時など)

更新
2013年03月03日(日)

スムーススクロールでページ内移動時の移動先の位置を調整する方法です。当サイト作者が作成した次のテンプレートについてです。

2013年3月3日(日)追記:このページの内容は過去ver用です。ver1.4.0~1.4.1ではHTML編集内のコメントアウト参照、ver1.5.0はJavaScriptによる便利機能をデフォルトからカスタムする方法参照。

概要

  1. この記事は「CSSでヘッダーをページ上部に固定表示」の改訂版です。

  2. 2012年10月27日現在最新のver1.3.0デフォルト状態からの、ヘッダーをページ上部に固定表示する方法です。

  3. また、ページ内移動での移動先位置を調整する方法です。

テンプレートのHTMLを編集

  1. 次のコードを探します。下図で反転している部分です。

    //▼▼ 定義追加用スペース1 開始 ▼▼
    customtemplate-130-define-scroll-1.png
  2. 次のコードを追加します。追加後は下図のようになります。移動先の位置を調整するには右辺の値(94)を増減させます。

    var lower_scroll_target=94;
    customtemplate-130-define-scroll-2.png
  3. 追加したコードの6行下にある 121013121027 に変更します。下図で反転している部分が変更後になります。

    customtemplate-130-define-scroll-3.png

テンプレートのCSSを編集

  1. /*■§7 ピクトグラム の上に次のコードを挿入します。挿入場所は今後のメンテナンス性を考えて一応指定しています。

    
    /*header固定表示に伴う調整 http://customtemplate.blog112.fc2.com/blog-entry-59.html */
    #header{position:fixed;width:958px;}/*#page横幅に合わせる*/
    #content,#sidebar{top:80px;margin-bottom:80px;}
    #sidebar-toggle-on{top:80px;}
    #tbox{top:94px;height:90%;}
    
    /*上記調整のIE7以下非対応設定*/
    #header{/position:relative;}
    #content,#sidebar,#sidebar-toggle-on,#tbox{/top:0;/margin-bottom:0;}
    
  2. ヘッダーを固定する必要がなく、スムーススクロールの移動先を調整するだけなら、CSS編集で上記コードを追加する必要はありません。

デモページ

  1. デモページです。

  2. デモページで画面をスクロールすると、headerが固定されているのを確認できます。

  3. デモページ内の このページの目次を常に表示する ボタンをクリックすると、固定されたheaderとタブボックスが重ならないのを確認できます。

  4. スムーススクロールの移動先位置がヘッダーと重ならないのを確認できます。

IE7以下非対応

  1. IE7以下では固定されていません。

  2. IE7では、header全体が右にずれています。ずれるよりも固定されないほうがましだと思い、固定されないようにしました。

  3. IE7以下用のコードはW3Cで invalid です。気になる方は修正してください。

今後のテンプレート改訂時には

  1. テンプレートの改訂時に、スムーススクロールの移動先位置を手軽に指定できるようにする予定です。

  2. customtemplateのver1.3.1以降なら上記コードやキャプチャー画像とCSS編集内の記載事項に多少の相違があると思います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)