menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/05/30
  • JQuery

ヘッダーメニューを固定した場合 ページ内リンクのずれの対処方法

上部にヘッダーメニューを固定した場合、ページ内リンクを設定するとヘッダーメニュー要素にリンク先の上部が隠れてしまいます。そのずれの対処方法を紹介します。
js

使用方法

準備するファイル

・jquery.js

外部ファイルの読み込み

head内へ以下を追加します。

JavaScript



head内に以下のscriptを記述します。
「var headerHight = 50; //ヘッダーの高さ」でヘッダーの高さを指定します。
「}, 400, “swing”);」の部分でスクロール速度を設定します。

HTML

リンク先に「#〜」でページ内リンクを設定します。


リンク先

要素に「id」を設定します。

CSS

「height」で固定要素の高さを設定。

基本的なページ内リンクの記述に、簡単なコードを追加するだけです。スムーススクロールにもなっているのでダブらないように気をつけてください。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11