アンカーリンク〜様々な状況に対応できるJavascript記述方法〜 | デザインやWEBに関する情報を発信する【まるログ】
アンカーリンクにはページ内リンクや、ページをまたいで特定の場所にリンクさせる方法があります。特定の場所へリンクさせることができるので便利ですが、ヘッダーなどがフローティングでページ上部に固定されている場合は、何も対策をしないとアンカー位置がそれらのナビと重なってしまいます。今回はその対処法を紹介したいと思います。 デモページ デモページは前提として、ヘッダーがフローティングしていて、各ページのタグに固有のidが指定されているものとします。 source1：ページ内リンク（ページ内アンカーリンクを押した際の挙動） $(function () { var headH = $("header").outerHeight(); //ヘッダーの高さを取得 var animeSpeed = 500; //アニメーションスピード $("a[href^='#']").on({ "click": funct
stickyNavbar.js
1. Download As a first step download stickyNavbar.js from GitHub: Download on GitHub Or get the package from Bower: bower install stickyNavbar.js Or clone the repo: git clone https://github.com/jbutko/stickyNavbar.js.git 3. HTML Markup To properly use stickyNavbar.js setup an usual HTML markup for the navigation: <div id="header" class="header"> <nav id="nav"> <ul class="nav navbar-nav"> <li> <a h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Company Overview | Publicis Sapient
Designer, Creatives and Developers Jobs Board | Authentic Positions
