質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1595閲覧

vue-scrolltoを使って、ページ内スクロール機能とページをまたいでのスクロール機能を実装したい。

0209at

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/22 23:59

前提・実現したいこと

vue-scrolltoを使って、ページ内スクロール機能とページをまたいでのスクロールした際に、
見た目の崩れがでないようにしたい。
適切な位置にスクロールできるようにしたい。

ここに質問の内容を詳しく書いてください。
ページ遷移した際に、ヘッダーの箇所が映るのは、ヘッダーが固定されていないから起こることでしょうか。
それとも、スクロールのタイミングと画像が読み込みタイミングを変更することで解消できるんでしょうか。
こういった事象が起こる原因と解決方法を教えていただけますと幸いです。

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

vue-scrolltoを用いてページ遷移をし、アンカーリンクにとんだ際に、ヘッダーがうつる。
(ページの構成としては、ヘッダーの下に画像、遷移したいアンカーリンクの順番においている。)先に、スクロールし、画像が読み込まれていない。画像が読み込まれていない分、ヘッダーの箇所が映ってしまっていると考えられる。

該当のソースコード

headermenu/index.vue

<template> <div> <ul> <li> <NuxtLink v-scroll-to="{ el: '#scrolltoservise', offset: 25, }" :to="{ path: '/', hash: 'scrolltoservise' }" >{{ servise }}</NuxtLink > </li> <li> <NuxtLink v-scroll-to="'#conpanyprofile'" :to="scrolltoconpanyprofile" >{{ conpanyprofile }}</NuxtLink > </li> <li> <NuxtLink :to="scrolltocontact">{{ contact }}</NuxtLink> </li> </ul> </div> </template> <script> export default { name: 'HeaderMenu', props: { servise: { type: String, required: false, default: 'サービス', }, scrolltoservise: { type: String, required: false, default: '/#scrolltoservise', }, scrolltoconpanyprofile: { type: String, required: false, default: '/#conpanyprofile', }, scrolltocontact: { type: String, required: false, default: '/contact', }, }, } </script> <style scoped> div { margin: 0%; } ul { display: flex; list-style: none; } </style>

pages/ index.vue

<template> <v-app> <v-main class="ma-0 pa-0"> <div class="bg"> <v-container fluid class="pa-0 ma-0"> <div class="Block1"> <v-img :src="require(`@/assets/img/top-image.png`)" /> </div> <div class="Block2"> <v-col cols="12" class="servise_ttl" align="center"> <!------- SERVISE サービス ---------> <div id="scrolltoservise" class="heading-subheading_servise"> <heading-subheading heading="SERVISE" subheading="サービス" /> </div> </v-col> <div class="contents1"> <v-row justify="center"> <v-col cols="12" sm="8" md="4" align="center"> <div class="Titletext"> <title-text title="駄菓子情報発信" :image="require(`@/assets/img/decoration.svg`)" text="ggggggggg" color="black" /> <div class="youtube_btn"> <info-button name="YouTubeチャンネル" icon="mdi-open-in-new" url="https://www.youtube.com/" /> </div> </div> </v-col> <v-col cols="10" class="border" sm="8" md="4" align="center"> <div class="image"> <shadow-image :image="require(`@/assets/img/service1.png`)" /> </div> </v-col> </v-row> </div> </div> </v-container> </div> </v-main> </v-app> </template> <script> import HeadingSubheading from '~/components/atoms/HeadingSubheading/Index.vue' import ShadowImage from '~/components/atoms/ShadowImage/Index.vue' import TitleText from '~/components/atoms/TitleText/Index.vue' import InfoButton from '~/components/atoms/InfoButton/Index.vue' import OverviewUnderline from '~/components/atoms/OverviewUnderline/Index.vue' export default { components: { HeadingSubheading, ShadowImage, TitleText, InfoButton, OverviewUnderline, }, data() { return { } }, // mounted() { // const hash = this.$route.hash // if (hash && hash.match(/^#.+$/)) { // this.$scrollTo(hash, 0, { offset: 0 }) // } // }, mounted() { if (this.$route.hash) { this.scrollToHash() } }, } </script> <style scoped> .bg { color: #f2ede7; background: #fcf6ef; margin: 0; } .Block1 { -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 83%, 0% 100%); max-height: 1200px; width: 100% auto; margin: 0; } .Block2 { background-color: #fcf6ef; color: #ccc; height: 1000px; } .Block3 { -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); clip-path: polygon(0 21%, 100% 0, 100% 100%, 0% 100%); background-color: #f2ede7; padding: 60px 0 10px 0; height: 680px; } .contents1 { margin-top: 61px; margin-bottom: 75px; } .youtube_btn { padding-top: 10px; } .onlineSalon_btn { padding-top: 10px; } </style>

plugin/ vue-scrollto.js

import Vue from 'vue' import VueScrollTo from 'vue-scrollto' Vue.use(VueScrollTo, { duration: 500, easing: 'ease', })

参考にした記事

https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91plugin%e5%ae%9f%e8%b7%b5%e7%b7%a8%ef%bc%9avue-scrollto%e3%82%92%e3%83%9a%e3%83%bc%e3%82%b8%e9%81%b7%e7%a7%bb%e3%81%a7%e3%82%82%e9%81%a9%e5%bf%9c%e3%81%95%e3%81%9b%e3%82%88/

試したこと

offsetで位置を調整
ヘッダーのcssを調整

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

nuxt 2.15.4
vue 2.6.12
node v14.16.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問