別ページのアンカーリンクをスムーズスクロールするjavascript(ズレも調整)

以前の記事の通り、縦長ページでアンカーリンクを作り、ページ内リンクとしてスムーズスクロールするようにjQueryで設定しました。
» 記事:ページ内リンクをjQueryでスムーズスクロールした際のずれを解消する方法

せっかくなので他のページからもそのページのアンカーリンクにリンクを張ってみましたが、position: fixed;で固定したメニューバーとかぶってしまい、見た目がずれてしまっています。
ズレを修正するついでに、別ページからのリンクにもスムーズスクロール対応するjavascriptを設置しました。

こちらのjavascriptはアンカーリンクのid=""を使いません。
代わりに被リンクページのHTMLにdivタグ(等)を設定する必要があります。
何番目のdivタグへ飛ぶかを指示することで、アンカーリンクの場所へ移動させます。

1)まずはjavascript。
メニューバーが被ってしまう等の場合はの数値100を任意で調整してください。

2)被リンクページのHTML

3)リンク元ページのHTML
見かけ1番目のdivタグへのリンクは?no=0のようにゼロからのスタートですのでお間違えなきように。

アンカーリンクのid=""を使わないので、少し慣れが必要な感じですが、これで別ページからアンカーリンクの場所にズレずに飛ぶことができ、しかもスムーズスクロールします。

大変参考になりました!:
リンク先ページの指定位置にスクロールで移動

西山
西山 寛之(にしやま ひろゆき)
1975年生まれ O型 | 愛媛大学法文学部卒業
レコードショップ運営~大利木材取締役[ ウェブ制作・運用/営業/CTO ]を経て、
2015年4月 パソラボ設立。
投稿日 カテゴリー Blog タグ , , .

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です