<link media="all" rel="stylesheet" href="/assets/themes/default/css/anchor-link-list.css?cb=">
<div class="anchor-link-list" data-module="anchorLinkList">
<template>
<ul class="anchor-link-list__list-item">
<a class="anchor-link-list__link js-link"></a>
</ul>
</template>
<h2 class="anchor-link-list__title">In this section</h2>
<ul class="anchor-link-list__list js-list"></ul>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/anchor-link-list.css?cb={{cacheBuster}}">
{{/if}}
<div class="anchor-link-list" data-module="anchorLinkList">
<template>
<ul class="anchor-link-list__list-item">
<a class="anchor-link-list__link js-link"></a>
</ul>
</template>
<h2 class="anchor-link-list__title">{{title}}</h2>
<ul class="anchor-link-list__list js-list"></ul>
</div>
{
"theme": "default",
"firstInstance": true,
"title": "In this section"
}
import generateTemplate from '../../../../js/utils/generate-template';
class AnchorLinksList {
constructor(module) {
this.module = module;
this.list = this.module.querySelector('.js-list');
this.init();
}
init() {
const anchorLinks = document.querySelectorAll('.js-anchor-link');
anchorLinks.forEach((anchorLink) => {
const template = generateTemplate(this.module.querySelector('template'));
const link = template.querySelector('.js-link');
link.href = `#${anchorLink.id}`;
link.innerText = anchorLink.dataset.title;
this.list.append(link);
link.addEventListener('click', (e) => {
e.preventDefault();
document.querySelector(`#${anchorLink.id}`).scrollIntoView({
behavior: 'smooth',
});
});
});
}
}
export default (module) => new AnchorLinksList(module);
@import 'source/scss/01-settings/__import';
@import 'source/scss/02-tools/__import';
.anchor-link-list {
&__title {
@extend %heading02;
}
&__link {
display: block;
}
}
No notes defined.