Vue.jsで画像遅延読み込みとスムーズスクロールを両立させたい

Question

前提・実現したいこと

画像遅延読み込み（v-lazy-image）を使用しているページでスムーズスクロールするページ内リンクを実装したいです。

発生している問題・エラーメッセージ

Vue.jsで画像遅延読み込み（v-lazy-image）を使用しているページでスムーズスクロール（vue-scrollto）でページ内リンクを実装すると、表示しきれない画像の分ずれてしまいました。

該当のソースコード

<template>
  <div>
    <atom-button
      tag="a"
      v-scroll-to="'#sumple1'">
        <p>sumple1</p>
    </atom-button>
    <atom-button
      tag="a"
      v-scroll-to="'#sumple2'">
        <p>sumple2</p>
    </atom-button>
    <atom-button
      tag="a"
      v-scroll-to="'#sumple3'">
        <p>sumple3</p>
    </atom-button>
    <sumple1  id="sumple1" />
    <sumple2  id="sumple2" />
    <sumple3  id="sumple3" />
  </div>
</template>

<script>
import AtomButton from ~
import Sumple1 from ~
import Sumple2 from ~
import Sumple3 from ~

export default {
  name: 'Sumple',
  components: {
    'atom-button': AtomButton,
    'sumple1': Sumple1,
    'sumple2': Sumple2,
    'sumple3': Sumple3
  }
}
</script>

各Sumple内に

<figure>
  <v-lazy-image
    :src="require('@sumple.png')" />
</figure>

のようなv-lazy-imageを使用した画像があります。

[補足]AtomButtonはリンクボタンのコンポーネントです。

<template>
  <atom-link
    :to="to"
    :tag="tag"
    class="button"
    :class="classObject">
    <span>
      <slot />
    </span>
  </atom-link>
</template>

<script>
import Link from '@/components/atoms/Link'
export default {
  name: 'AtomButton',
  components: {
    'atom-link': Link
  },
  props: {
    to: {
      type: String,
      default: null
    },
    tag: {
      type: String,
      default: null
    },
    classObject: {
      type: [String, Array, Object],
      default: null
    }
  }
}
</script>

ここで使っているコンポーネントLinkの中身は下記の通りです。

<template>
  <component
    :is="element"
    v-bind="{ [attribute]: to }">
    <slot />
  </component>
</template>

<script>
export default {
  name: 'Link',
  props: {
    to: {
      type: String,
      default: null
    },
    tag: {
      type: String,
      default: null
    }
  },
  data: () => ({
    element: 'div',
    attribute: null
  }),
  mounted () {
    this.element = this.checkElement()
    this.attribute = this.checkAttribute()
  },
  methods: {
    checkElement () {
      if (this.tag) return this.tag
      if (!this.to) return 'div'
      if (this.to.startsWith('http')) return 'a'
      if (this.to.startsWith('/static') || this.to.startsWith('/assets')) return 'a'
      return 'router-link'
    },
    checkAttribute () {
      if (this.element === 'a') return 'href'
      if (this.element === 'router-link') return 'to'
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

試したこと

調べているとそもそも画像遅延読み込みとスムーズスクロールの相性が悪いということはなんとなくわかりました。
https://kaiteki-chokin.com/anchor-link-lazy-loading/
にたどり着き、これならいけるかなと思いましたが、
書き方が悪いのかスクロールしない普通のリンクになってしまいました。

<template>
  <div>
    <atom-button
      tag="a"
      to="#sumple1">
       <p>sumple1</p>
    </atom-button>
    <atom-button
      tag="a"
      to="#sumple2">
        <p>sumple2</p>
    </atom-button>
    <atom-button
      tag="a"
      to="#sumple3">
        <p>sumple3</p>
    </atom-button>
    <sumple1  id="sumple1" />
    <sumple2  id="sumple2" />
    <sumple3  id="sumple3" />
  </div>
</template>

<script>
import $ from 'jquery'
import AtomButton from ~
import Sumple1 from ~
import Sumple2 from ~
import Sumple3 from ~

export default {
  name: 'Sumple',
  components: {
    'atom-button': AtomButton,
    'sumple1': Sumple1,
    'sumple2': Sumple2,
    'sumple3': Sumple3
  },
  mounted: {
    function() {
      this.$nextTick(function () {
        $('a[href^="#"]').click(function(e) {
          const href = $(this).attr("href");
          const target = $(href == "#" || href == "" ? 'html' : href);
          const position = target.offset().top;
          $.when(
            $("html, body").animate({
              scrollTop: position
            }, 500, "swing"),
            e.preventDefault(),
          ).done(function() {
            const diff = target.offset().top;
            if (diff === position) {
            } else {
              $("html, body").animate({
                scrollTop: diff
              }, 10, "swing");
            }
          });
        });
      })
    }
  }
}
</script>

補足情報（FW/ツールのバージョンなど）

コードの意味を理解できていないまま書いている部分もあるため、
要領を得ない質問になりすみません。
足りない情報がありましたらお申し付けください。
よろしくお願いいたします。

Answer 1

なにかVue.jsi以外で機能追加していますね？
(Vue.jsで<atom-button>タグは情報がない)
<atom-button>てなんですか？

クリックイベント自体設定できなくなっていますね
ここは

        $('a[href^="#"]').click(function(e) {
          const href = $(this).attr("href");

一応こうでは？
(atom-buttonが別のタグに変更になるようだが、どうなるか不明の為動作確認できません)

~~ $('a[href^="#"]').click(function(e) {　~~
~~ const href = $(this).attr("to"); ~~
実行した後のHTMLじゃないと判断つきません。
追記 変換内容

<a href="#sumple1" class="button"><span><p>sumple1</p></span></a>

この変換が全て完了したあとに処理なのですが

  mounted: {
    function() {
      this.$nextTick(function () {

この時点で全て変換されていてthis.$nextTickは反応していますか？

素直に

  mounted: {
      function () {

でタイミングがとれそうですが...

Comments

[yuixiang]

ご回答とご指摘ありがとうございます。
<atom-button>は自作のコンポーネントなので、中身の説明が必要でした…。
追記いたしました。

上記のコードを試してみたのですが、動作変わらずでした。

[kuma_kuma_]

> <atom-button>は自作のコンポーネント
ええと<atom-button>は何かのタグに変換されているんですよね？<a>?
その後に
$('a[href^="#"]').click...
を動かいて下さい
そうすればclickイベントが設定されます。

あとこの場合変換後のHTMLを載せて下さい。(再現できなければ回答できません。)

[yuixiang]

何度もお手数おかけしてすみません。

<atom-button
tag="a"
to="#sumple1">
<p>sumple1</p>
</atom-button>
は、ページ上では
<a href="#sumple1" class="button"><span><p>sumple1</p></span></a>
に変換されるのですが、この回答でよかったでしょうか…？

また、<atom-button>には
$('a[href^="#"]').click...が効かないのであればと
<a href="#sumple1">sumple1</a>でも試してみたのですが、ダメでした。

Answer 2

お返事が遅れました。

そもそも上記の状態ではjQuery自体が動いていませんでした…。
importの順番を変えることで動作しましたが、なぜ動いたかは理解できておらず…。

import AtomButton from ~
import Sumple1 from ~
import Sumple2 from ~
import Sumple3 from ~
import $ from 'jquery'

ひとまずこれで動くようになりました。

this.$nextTick(function () {については、
リンクタグが<a href="#sumple1">sumple1</a>であれば必要ありませんでしたが、
コンポーネント<atom-button>の中身のリンクに効かせたい場合は必要でした。

kuma_kuma_様、ご回答くださりありがとうございました！