GASのWebアプリを作っていた際に、ページ内リンクの実施方法に悩んだので備忘録として残しておく。
過去の記事を読むとVueを使った方法などがあったがうまくやり方がわからなかったためJSで機能する様にすr
通常のWebページのページ内リンク
通常のHTMLの場合は以下のようにできる
<a href="#section1">セクション1に移動する</a>
<h1 id="section1">セクション1</h1>
しかしこれをGASで使うと別のページに推移してしまい機能しない
GASの場合
GASの場合はJavaScriptを使用する。
<body>
<button onclick="scrollToElement('searchform')">検索フォーム</button>
<h2 id="searchform">検索フォーム</h2>
<script>
function scrollToElement(id) {
var element = document.getElementById(id);
element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
</script>
</body>
こうするとページ内リンクの作成ができる。
もしbuttonになるのが嫌な場合は、CSSで修正してください。