(cache)Element.scrollIntoView • Playground • Svelte

App.svelte

function scrollIntoView({ target }) {

const el = document.querySelector(target.getAttribute('href'));

if (!el) return;

el.scrollIntoView({

behavior: 'smooth'

});

}

</script>

<nav>

<a href="#section-1" on:click|preventDefault={scrollIntoView}>Section 1</a>

<a href="#section-2" on:click|preventDefault={scrollIntoView}>Section 2</a>

<a href="#section-3" on:click|preventDefault={scrollIntoView}>Section 3</a>

</nav>

<main>

<h2>

Section 1

</h2>

</section>

<h2>

Section 2

</h2>

</section>

<h2>

Section 3

</h2>

</section>

</main>

<style>

section {

min-height: 100vh;

}

</style>

import "svelte/internal/disclose-version";

import "svelte/internal/flags/legacy";

import * as $ from "svelte/internal/client";

var root = $.template(`<nav><a href="#section-1">Section 1</a> <a href="#section-2">Section 2</a> <a href="#section-3">Section 3</a></nav> <main><section id="section-1" class="svelte-1h9qhic"><h2>Section 1</h2></section> <section id="section-2" class="svelte-1h9qhic"><h2>Section 2</h2></section> <section id="section-3" class="svelte-1h9qhic"><h2>Section 3</h2></section></main>`, 1);

export default function App($$anchor) {

function scrollIntoView({ target }) {

const el = document.querySelector(target.getAttribute('href'));

if (!el) return;

el.scrollIntoView({ behavior: 'smooth' });

}

var fragment = root();

var nav = $.first_child(fragment);

var a = $.child(nav);

var a_1 = $.sibling(a, 2);

var a_2 = $.sibling(a_1, 2);

$.reset(nav);

$.next(2);

$.event("click", a, $.preventDefault(scrollIntoView));

$.event("click", a_1, $.preventDefault(scrollIntoView));

$.event("click", a_2, $.preventDefault(scrollIntoView));

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

section.svelte-1h9qhic {

min-height: 100vh;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 667
end: 718
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 676
end: 683
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 676
end: 683
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "section"
start: 676
end: 683
 }
 ]
start: 676
end: 683
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 684
end: 709
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 688
end: 705
property: "min-height"
value: "100vh"
 }
 ]
 }
start: 676
end: 709
 }
 ]
content:  {...}
 start: 674
end: 710
styles: "\n\tsection {\n\t\tmin-height: 100vh;\n\t}\n"
comment: null
 }
 }
js: []
start: 206
end: 665
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 204
end: 206
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 206
end: 449
name: "nav"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 211
end: 213
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 213
end: 288
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 216
end: 233
name: "href"
value: [...] (1)
  Text {...}
 start: 222
end: 232
type: "Text"
raw: "#section-1"
data: "#section-1"
 }
 ]
 }
 OnDirective {...}
 start: 234
end: 274
type: "OnDirective"
name: "click"
modifiers: [...] (1)
  "preventDefault"
 ]
expression: Identifier {...}
 type: "Identifier"
start: 259
end: 273
loc:  {...}
 start:  {...}
 line: 12
column: 47
 }
end:  {...}
 line: 12
column: 61
 }
 }
name: "scrollIntoView"
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 275
end: 284
raw: "Section 1"
data: "Section 1"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 288
end: 290
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 290
end: 365
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 293
end: 310
name: "href"
value: [...] (1)
  Text {...}
 start: 299
end: 309
type: "Text"
raw: "#section-2"
data: "#section-2"
 }
 ]
 }
 OnDirective {...}
 start: 311
end: 351
type: "OnDirective"
name: "click"
modifiers: [...] (1)
  "preventDefault"
 ]
expression: Identifier {...}
 type: "Identifier"
start: 336
end: 350
loc:  {...}
 start:  {...}
 line: 13
column: 47
 }
end:  {...}
 line: 13
column: 61
 }
 }
name: "scrollIntoView"
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 352
end: 361
raw: "Section 2"
data: "Section 2"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 365
end: 367
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 367
end: 442
name: "a"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 370
end: 387
name: "href"
value: [...] (1)
  Text {...}
 start: 376
end: 386
type: "Text"
raw: "#section-3"
data: "#section-3"
 }
 ]
 }
 OnDirective {...}
 start: 388
end: 428
type: "OnDirective"
name: "click"
modifiers: [...] (1)
  "preventDefault"
 ]
expression: Identifier {...}
 type: "Identifier"
start: 413
end: 427
loc:  {...}
 start:  {...}
 line: 14
column: 47
 }
end:  {...}
 line: 14
column: 61
 }
 }
name: "scrollIntoView"
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 429
end: 438
raw: "Section 3"
data: "Section 3"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 442
end: 443
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 449
end: 451
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 451
end: 665
name: "main"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 457
end: 459
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 459
end: 523
name: "section"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 468
end: 482
name: "id"
value: [...] (1)
  Text {...}
 start: 472
end: 481
type: "Text"
raw: "section-1"
data: "section-1"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: "svelte-1h9qhic"
raw: "svelte-1h9qhic"
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 483
end: 486
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 486
end: 511
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 490
end: 506
raw: "Section 1"
data: "Section 1"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 511
end: 513
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 523
end: 526
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 526
end: 590
name: "section"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 535
end: 549
name: "id"
value: [...] (1)
  Text {...}
 start: 539
end: 548
type: "Text"
raw: "section-2"
data: "section-2"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: "svelte-1h9qhic"
raw: "svelte-1h9qhic"
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 550
end: 553
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 553
end: 578
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 557
end: 573
raw: "Section 2"
data: "Section 2"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 578
end: 580
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 590
end: 593
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 593
end: 657
name: "section"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 602
end: 616
name: "id"
value: [...] (1)
  Text {...}
 start: 606
end: 615
type: "Text"
raw: "section-3"
data: "section-3"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: "svelte-1h9qhic"
raw: "svelte-1h9qhic"
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 617
end: 620
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 620
end: 645
name: "h2"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 624
end: 640
raw: "Section 3"
data: "Section 3"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 645
end: 647
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 657
end: 658
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 665
end: 667
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {
 type: "Script"
start: 0
end: 204
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 195
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 9
column: 0
 }
 }
body: [...] (1)
  FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 11
end: 194
loc:  {...}
 start:  {...}
 line: 2
column: 2
 }
end:  {...}
 line: 8
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 20
end: 34
loc:  {...}
 start:  {...}
 line: 2
column: 11
 }
end:  {...}
 line: 2
column: 25
 }
 }
name: "scrollIntoView"
 }
expression: false
generator: false
async: false
params: [...] (1)
  ObjectPattern {...}
 type: "ObjectPattern"
start: 35
end: 45
loc:  {...}
 start:  {...}
 line: 2
column: 26
 }
end:  {...}
 line: 2
column: 36
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 37
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 28
 }
end:  {...}
 line: 2
column: 34
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 37
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 28
 }
end:  {...}
 line: 2
column: 34
 }
 }
name: "target"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 37
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 28
 }
end:  {...}
 line: 2
column: 34
 }
 }
name: "target"
 }
 }
 ]
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 47
end: 194
loc:  {...}
 start:  {...}
 line: 2
column: 38
 }
end:  {...}
 line: 8
column: 3
 }
 }
body: [...] (3)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 51
end: 114
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 65
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 57
end: 113
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 64
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 57
end: 59
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 10
 }
 }
name: "el"
 }
init: CallExpression {...}
 type: "CallExpression"
start: 62
end: 113
loc:  {...}
 start:  {...}
 line: 3
column: 13
 }
end:  {...}
 line: 3
column: 64
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 62
end: 84
loc:  {...}
 start:  {...}
 line: 3
column: 13
 }
end:  {...}
 line: 3
column: 35
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 62
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 13
 }
end:  {...}
 line: 3
column: 21
 }
 }
name: "document"
 }
property: Identifier {...}
 type: "Identifier"
start: 71
end: 84
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 35
 }
 }
name: "querySelector"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  CallExpression {...}
 type: "CallExpression"
start: 85
end: 112
loc:  {...}
 start:  {...}
 line: 3
column: 36
 }
end:  {...}
 line: 3
column: 63
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 85
end: 104
loc:  {...}
 start:  {...}
 line: 3
column: 36
 }
end:  {...}
 line: 3
column: 55
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 85
end: 91
loc:  {...}
 start:  {...}
 line: 3
column: 36
 }
end:  {...}
 line: 3
column: 42
 }
 }
name: "target"
 }
property: Identifier {...}
 type: "Identifier"
start: 92
end: 104
loc:  {...}
 start:  {...}
 line: 3
column: 43
 }
end:  {...}
 line: 3
column: 55
 }
 }
name: "getAttribute"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 105
end: 111
loc:  {...}
 start:  {...}
 line: 3
column: 56
 }
end:  {...}
 line: 3
column: 62
 }
 }
value: "href"
raw: "'href'"
 }
 ]
optional: false
 }
 ]
optional: false
 }
 }
 ]
kind: "const"
 }
 IfStatement {...}
 type: "IfStatement"
start: 117
end: 133
loc:  {...}
 start:  {...}
 line: 4
column: 2
 }
end:  {...}
 line: 4
column: 18
 }
 }
test: UnaryExpression {...}
 type: "UnaryExpression"
start: 121
end: 124
loc:  {...}
 start:  {...}
 line: 4
column: 6
 }
end:  {...}
 line: 4
column: 9
 }
 }
operator: "!"
prefix: true
argument: Identifier {...}
 type: "Identifier"
start: 122
end: 124
loc:  {...}
 start:  {...}
 line: 4
column: 7
 }
end:  {...}
 line: 4
column: 9
 }
 }
name: "el"
 }
 }
consequent: ReturnStatement {...}
 type: "ReturnStatement"
start: 126
end: 133
loc:  {...}
 start:  {...}
 line: 4
column: 11
 }
end:  {...}
 line: 4
column: 18
 }
 }
argument: null
 }
alternate: null
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 138
end: 190
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 7
column: 7
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 138
end: 189
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 7
column: 6
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 138
end: 155
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 5
column: 21
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 138
end: 140
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 5
column: 6
 }
 }
name: "el"
 }
property: Identifier {...}
 type: "Identifier"
start: 141
end: 155
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 21
 }
 }
name: "scrollIntoView"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 156
end: 188
loc:  {...}
 start:  {...}
 line: 5
column: 22
 }
end:  {...}
 line: 7
column: 5
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 164
end: 182
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 24
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 164
end: 172
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 14
 }
 }
name: "behavior"
 }
value: Literal {...}
 type: "Literal"
start: 174
end: 182
loc:  {...}
 start:  {...}
 line: 6
column: 16
 }
end:  {...}
 line: 6
column: 24
 }
 }
value: "smooth"
raw: "'smooth'"
 }
kind: "init"
 }
 ]
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern