素片識別子にスクロール

Edit New

素片識別子へのスクロール (Web)

[5] 素片識別子付きの URL へ navigate すると、 素片識別子へのスクロール (scroll to the fragment identifier) が実行され、 その素片識別子により表される要素を viewport に表示した状態となります。

仕様書

処理

[2] 文書文書の素片へのスクロール (scroll to the fragment) は、 次のように行わなければなりません >>1。

  1. [13] 対象を、文書の示された部分に設定します。
  2. [14] 対象が要素でないか、対象の要素がレンダリング中でないなら、
    1. [15] 文書の対象要素を、 null に設定します。
    2. [16] 対象が文書の先頭 (top) なら、
      1. [17] 文書のはじめにスクロールします。
  3. [7] それ以外なら、
    1. [10] 文書の対象要素を、対象に設定します。
    2. [11] scroll an element into view を実行します。
      要素
      対象
      挙動
      auto
      ブロック
      start
      行内
      nearest
    3. [18] 対象について focusing steps を実行します。 ただし fallback target は文書の viewport とします。
    4. [19] sequential focus navigation starting point を対象へと移動します。
[6] 対象は、 HTML文書では文書の先頭か、文書中のいずれかの要素です。 理論上はHTML文書以外ならそれ以外のもの (範囲やテキスト節点など) を指すこともあり得ますが、現時点では実際上はそのようなことはありません。

[21] HTML Standard はスクロールのかわりに何らかの代替手段で利用者の注意を惹きつける >>1 形の実装も認めています。それが具体的に何を意味しているのかは不明ですが、 非視覚的利用者エージェントなどを想定しているのでしょう。 しかし HTML Standard の規定では代替手段を使う場合やそうでなくても対象がレンダリング中でない場合に文書の対象要素をどう扱うのか明確になっていません。 現実的には、視覚的利用者エージェントでなくても CSSOM のスクロールを実装し、 それが画面表示の変化(だけ)ではなく、代替手段で利用者の注意を惹く挙動をもたらすとすることになりそうです。

[24] 呼び出し元の try to scroll to the fragment は、 指定された部分を発見できたかどうかの結果を利用します。

文脈

[4] navigate や履歴の探索から呼び出されます。

歴史

[8] Fix #559: require focus movement on scrolling to a fragment ID · whatwg/html@414bee7 ( 版) https://github.com/whatwg/html/commit/414bee7380eef0aa4487c44e2008eef6dcfb9ee4

[9] Align with URL spec's terminology: "fragment identifier" => "fragment" · whatwg/html@472bd07 ( 版) https://github.com/whatwg/html/commit/472bd07726db580b97b9d775996e9d895cda8be0

[12] Make :target definition sticky based on last scroll-to-fragment ( (domenic著, )) https://github.com/whatwg/html/commit/1488bb6f765e41558bb221dc247012a35d88527b

[3] 経営理念 | 株式会社スマートデバイス・テクノロジー求人サイト () http://recruit.smartdt.jp/about-us/

<script>

//スムーズスクロール

jQuery(function(){

// #で始まるアンカーをクリックした場合に処理

jQuery('a[href^=#]').click(function() {

// スクロールの速度

var speed = 400; // ミリ秒

// アンカーの値取得

var href= jQuery(this).attr("href");

// 移動先を取得

var target = jQuery(href == "#" || href == "" ? 'html' : href);

// 移動先を数値で取得

var position = target.offset().top;

// スムーススクロール

jQuery('body,html').animate({scrollTop:position}, speed, 'swing');

return false;

});

});

</script>

[20] Fix 'scroll an element into view' invocations (zcorpan著, ) https://github.com/whatwg/html/commit/c50e5286c189571e1c7b938110d3ba5515b0ee13

[22] Change invocation of cssom-view "scroll an element into view" · Issue #464 · whatwg/html () https://github.com/whatwg/html/issues/464

[23] scroll an element into view args by zcorpan · Pull Request #3131 · whatwg/html () https://github.com/whatwg/html/pull/3131

[25] Make fragment loop not depend on spin the event loop (annevk著, ) https://github.com/whatwg/html/commit/e62a7be6f3161993b82e9d8469ba2e64a3c6a2a6

[26] Make fragment loop not depend on spin the event loop (annevk著, ) https://github.com/whatwg/html/commit/e62a7be6f3161993b82e9d8469ba2e64a3c6a2a6

[27] Make fragment loop not depend on spin the event loop by annevk · Pull Request #4440 · whatwg/html () https://github.com/whatwg/html/pull/4440

Updated: