素片へのスクロール

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

[5] 素片識別子付きの URLnavigate すると、 素片識別子へのスクロール (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