[GASで実装する] 同一ページ内で任意の場所までスクロールするやつ

GASは1プロジェクト1ページ

ページ内遷移も簡単ではない
移動したい先に<タグ id='xxx'>をおいて、そこに<a href="#xxx"></a>みたいなことはできない

情報量が増えてくると、何らかのナビゲーションは必要

ということで調べてみた

複数ページを作成して、doget.gsにパラメータを設定して分岐させる。という方法をわかりやすく説明されているのがこちら
GoogleAppsScript(GAS)でページ遷移を擬似的に実装する方法
同様の実装は複数のブログなどでも紹介されているので、割とポピュラーな実装方法なのかも

jQueryならなんかできるっぽい？

わからなかった（どうもjQueryのコードは見ても理解できない）

jQueryがダメならVueで何とかできる？

Watchは使えるか？

watch

watch: {
  '$route': function (val) {
    if (val.hash.match(/^#/)) {
      document.getElementById(val.hash.replace(/^#/, '')).scrollIntoView()
    }
  }
}

今回のケースでは使えなかった

smoothscrollってどうよ

続いて参考にさせていただいたサイト
意外と簡単！Vue.jsでスムーススクロールとトップへ戻るボタンを実装する方法

CDNから

CDNのリンクをhtmlに追加

<!-- vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- vue scroll 画面スクロール用 -->
<script src="https://cdn.jsdelivr.net/npm/vue-smooth-scroll@1.0.13/dist/vue-smooth-scroll.min.js"></script>

smoothscroll.html

<a href="#section1" v-smooth-scroll>go to Section1</a>
.
.
.
<div id="section1">セクション１</div>

vuedirective.js

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    };
    window.addEventListener('scroll', f)
  }
});

上記をVueインスタンスの前に記述

以上でとりあえず動く

「トップへ戻る」的なボタンの実装がうまくいかないのが気になるので引き続き調べる

参考

vue-smooth-scroll
HTML Service: Create and Serve HTML