Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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">セクション1</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

yasuhikoc
ヘルプデスクやらテクニカルサポートやらの仕事を転々とした結果、コールセンターの知識のあるVBAプログラマになり、Filemakerでシステムを作ったり。 Jsonは誤植じゃありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away