Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [1] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-04-25 04:40:19 +09:00]] 版) <https://html.spec.whatwg.org/#scroll-to-the-fragment-identifier>
]REFS]

* 処理

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

[FIG(steps)[
= [13] [VAR[対象]]を、[VAR[文書]]の[F[示された部分][文書の示された部分]]に設定します。
= [14] [VAR[対象]]が[[要素]]でないか、[VAR[対象]]の[[要素]]が[[レンダリング中]]でないなら、
== [15] [VAR[文書]]の[F[対象要素]]を、 [[null]] に設定します。
== [16] [VAR[対象]]が[[文書]]の[[[RUBYB[先頭]@en[top]]][#top]]なら、
=== [17] [[文書のはじめにスクロール]]します。
= [7] それ以外なら、
== [10] [VAR[文書]]の[F[対象要素]]を、[VAR[対象]]に設定します。
== [11] [[scroll an element into view]] を実行します。 
[FIG(list members)[

: 要素 : [VAR[対象]]
: [VAR[挙動]] : [CODE[auto]]
: [VAR[ブロック]] : [CODE[start]]
: [VAR[行内]] : [CODE[nearest]]

]FIG]
== [18] [VAR[対象]]について [[focusing steps]] を実行します。
ただし [VAR[fallback target]] は[VAR[文書]]の [F[viewport]] とします。
== [19] [[sequential focus navigation starting point]] を[VAR[対象]]へと移動します。
]FIG]

;; [6] [VAR[対象]]は、 [[HTML文書]]では[[文書]]の先頭か、[[文書]]中のいずれかの[[要素]]です。
理論上は[[HTML文書]]以外ならそれ以外のもの ([[範囲]]や[[テキスト節点]]など)
を指すこともあり得ますが、現時点では実際上はそのようなことはありません。

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

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

* 文脈

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

* 歴史

[8] [CITE@en[Fix #559: require focus movement on scrolling to a fragment ID · whatwg/html@414bee7]] ([TIME[2016-02-25 11:39:23 +09:00]] 版) <https://github.com/whatwg/html/commit/414bee7380eef0aa4487c44e2008eef6dcfb9ee4>

[9] [CITE@en[Align with URL spec's terminology: "fragment identifier" => "fragment" · whatwg/html@472bd07]]
([TIME[2016-03-02 15:17:50 +09:00]] 版)
<https://github.com/whatwg/html/commit/472bd07726db580b97b9d775996e9d895cda8be0>

[12] [CITE@en[Make :target definition sticky based on last scroll-to-fragment]]
( ([[domenic]]著, [TIME[2016-06-07 22:08:31 +09:00]]))
<https://github.com/whatwg/html/commit/1488bb6f765e41558bb221dc247012a35d88527b>

[FIG(quote)[
[FIGCAPTION[
[3] [CITE@ja[経営理念 | 株式会社スマートデバイス・テクノロジー求人サイト]]
([TIME[2016-06-24 16:52:50 +09:00]])
<http://recruit.smartdt.jp/about-us/>
]FIGCAPTION]

> 
> <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>
>

]FIG]

[20] [CITE@en[Fix 'scroll an element into view' invocations]]
([[zcorpan]]著, [TIME[2018-06-12 04:02:56 +09:00]])
<https://github.com/whatwg/html/commit/c50e5286c189571e1c7b938110d3ba5515b0ee13>

[22] [CITE@en[Change invocation of cssom-view "scroll an element into view" · Issue #464 · whatwg/html]]
([TIME[2018-06-13 22:07:10 +09:00]])
<https://github.com/whatwg/html/issues/464>

[23] [CITE@en[scroll an element into view args by zcorpan · Pull Request #3131 · whatwg/html]]
([TIME[2018-06-13 22:08:11 +09:00]])
<https://github.com/whatwg/html/pull/3131>

[25] [CITE@en[Make fragment loop not depend on spin the event loop]]
([[annevk]]著, [TIME[2019-06-28 16:59:42 +09:00]])
<https://github.com/whatwg/html/commit/e62a7be6f3161993b82e9d8469ba2e64a3c6a2a6>

[26] [CITE@en[Make fragment loop not depend on spin the event loop]]
([[annevk]]著, [TIME[2019-06-28 16:59:42 +09:00]])
<https://github.com/whatwg/html/commit/e62a7be6f3161993b82e9d8469ba2e64a3c6a2a6>

[27] [CITE@en[Make fragment loop not depend on spin the event loop by annevk · Pull Request #4440 · whatwg/html]]
([TIME[2020-07-14 14:23:02 +09:00]])
<https://github.com/whatwg/html/pull/4440>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)