【Yahooトリプル】jQueryでページ内リンクをスムーズスクロールできないを解決する

Yahoo

2018.02.072021.02.25

Yahooショッピング用のレンタルサーバー、トリプルで作ったスムーズスクロールなページ内リンクを使うとスムーズスクロールしてくれない状況の解決策

jQuery関連記事

関連記事をもっとみる

状況

・使うコードは下記記事で作ったhtmlとJavaScript。
・リンクはhtmlで直書き。
・サーバーはYahooのトリプルサーバーを使用。

の場合、本来であればスムーズにスクロールしてくれるはずですが、JavaScriptが効いてるようで効いてない気持ち悪い動きをします。

console.logも動作しているのでJavaScript自体は動くけどアニメーションの問題かな？とも思われる。

ページ内リンクをjQueryでスムーズにスクロールさせる

ページ内リンクをjQueryでスムーズにスクロールさせるjQuery関連記事ページ内リンクのの作り方htmlまず、スクロール位置を移動させたい要素(上の例だとh3)にidを振り、ページ内リンクのトリガーとなるaタグのhref属性にh3と同じ...

スムーズスクロールさせる方法

とりあえず動作する方法を発見。

aタグのリンクはJavaScriptで書き出すこと。
それだけで期待通りの動作をしてくれます。

ページ内リンクをjQueryでスムーズにスクロールさせるサンプル

上のデモのようにJavaScriptを使ってaタグのリンクを書き出すようにすると動くようになりました。
外部JavaScriptでリンクを生成している場合では確認はできていますが、
html内にscriptタグで書き出す場合は確認していません。
もしできない場合は外部JavaScript化して読み出しする方法でならできますよー。

コメント

タイトルとURLをコピーしました