• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:javascript/他ページ内リンクでもスムーズスクロールさせたい)

javascript/他ページ内リンクでもスムーズスクロールさせたい

このQ&Aのポイント
  • ページ間の内部リンクでもスムーズなスクロールを実現したい場合、JavaScriptを使用することで簡単に実装することができます。
  • 特定の要素へのリンクをクリックした際にアニメーション的なスクロール効果を適用させるためのコードを記述することで、スムーズなページ内リンクを実現することができます。
  • ページ間のリンクにも同様のスクロール効果を適用したい場合、リンク先のURLを取得し、ページ内の該当要素までスクロールする処理を追加することで実現することができます。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

以下は、実際に組んだことはありませんが私なりの大まかな考えです。 ■まずはじめに  page2.html 内にスクロール対象となる <a name="a" id="a">●●●</a> はHTMLで書かない。 ■なぜか  page2.html が読み込まれた時点でブラウザが通常通りの振る舞いで #a の位置へパッとスクロールしてしまいます。 ■どうするか  page2.html のスクロール対象となる位置は HTML で <a id="a_">●●●</a> とする。  id は仮の id です。目印に「_」をつけています。 ■つぎに  document がロードされた時点で id と name を書き換えます。  書き換え前 → <a id="a_">●●●</a>  書き換え後 → <a name="a" id="a">●●●</a> ■あと一息  id="a" の 位置を取得。  setTimeout と scrollTo 関数を、ちまちまと目的の id="a" にたどり着くまで実行する。 ■おしまいに  ・私が好んで使う JavaScript のフレームワークを紹介します。   http://www.prototypejs.org/  ・prototype.js を使うと    // 縦の位置を取得    http://www.prototypejs.org/api/element/cumulativeoffset    $('a'),cumulativeOffset().top // ← id="a" の縦位置が取得出来ます。        // イベント観察をし、関数を実行する。    http://www.prototypejs.org/api/event/observe    Event.observe(document, 'load', function(){     // 試しにロード後にタイトルを書き換えてみます     document.title += new Date();    });    // エレメントの書き換え    http://www.prototypejs.org/api/element/update  などなど、ここでは紹介しきれないぐらい楽しい機能がついています。  Firefox、Internet Explorer 等のブラウザの違いを意識しにくい JavaScript を書くことが身につきます。  残念ながら、スムーススクロールはついていません。

noname#127702
質問者

お礼

ご回答ありがとうございます。お礼が大変遅くなり、申し訳ありません。 現状のjavascriptに何か加えるのかと思っていたのですが、そういう手順で分解して考えればいいのですね! javascriptの知識はほとんどなく、いつもネット上で紹介されているものをコピペばかりだったのですが、いよいよじっくり取り組むときが来たようです。 がんばってみます! 分かりやすく、丁寧にお教え下さりありがとうございました。 やってみてまた分からなくなったら質問投稿させていただきます。 もしご縁がありましたら、またよろしくお願いいたします。 お忙しいところありがとうございました!

すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.2

> これをpage2.htmlからpage1.html#aにリンクさせる際にもスムーズスクロールで移動させるにはどうしたら良いのでしょうか? window.onloadのタイミングでwindow.location.hashに何か入ってたらスクロールを開始してみてください。 ちなみに<div id="hoge">という書き方でも<a href="#hoge">が有効です。

noname#127702
質問者

お礼

ご回答ありがとうございます。お礼が大変遅くなり、申し訳ありません。 >window.onloadのタイミングでwindow.location.hashに何か入ってたらスクロールを開始してみてください。 とは、現在のjavascriptファイルにそういう命令文を加えるということでよいのでしょうか?? 私にjavascriptの知識がなくついていけてません…。 もう少し勉強して出直します> <;; ありがとうございました。 せっかく教えて下さったのにすぐ理解できず申し訳ありませんでした!

すると、全ての回答が全文表示されます。

関連するQ&A