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

質問

javascript／他ページ内リンクでもスムーズスクロールさせたい
お世話になります。
page1.htmlのページ内リンクにスムーズスクロールを設定しています。ページ内に#aとアンカー設定し、page1.html内で移動するときはもちろん問題ありません。
これをpage2.htmlからpage1.html#aにリンクさせる際にもスムーズスクロールで移動させるにはどうしたら良いのでしょうか？

そもそもそんなことはできないのでしょうか？
ソースを書かせていただきたいのですが、文字数が足りません。とりあえず最初の方だけ書きます。

var ss = {
fixAllLinks: function() {
var allLinks = document.getElementsByTagName('a');
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
ss.addEvent(lnk,'click',ss.smoothScroll);
}
}
},
smoothScroll: function(e) {
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}
if (target.nodeName.toLowerCase() != 'a') return;
anchor = target.hash.substr(1);
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}

続きは補足欄に書かせていただけそうなら書きます。
中途半端な情報かつ長文で申し訳ありません。
どんな些細なことでも構いませんので、アドバイスいただけないでしょうか。
どうぞよろしくお願いいたします。

回答No.1

k_yukichan · ベストアンサー

以下は、実際に組んだことはありませんが私なりの大まかな考えです。

■まずはじめに
　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 を書くことが身につきます。
　残念ながら、スムーススクロールはついていません。

お礼

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

分かりやすく、丁寧にお教え下さりありがとうございました。
やってみてまた分からなくなったら質問投稿させていただきます。
もしご縁がありましたら、またよろしくお願いいたします。

お忙しいところありがとうございました！

回答No.2

神崎 渉瑠（@taloo）

> これをpage2.htmlからpage1.html#aにリンクさせる際にもスムーズスクロールで移動させるにはどうしたら良いのでしょうか？
window.onloadのタイミングでwindow.location.hashに何か入ってたらスクロールを開始してみてください。

ちなみに<div id="hoge">という書き方でも<a href="#hoge">が有効です。

お礼

ご回答ありがとうございます。お礼が大変遅くなり、申し訳ありません。

＞window.onloadのタイミングでwindow.location.hashに何か入ってたらスクロールを開始してみてください。
とは、現在のjavascriptファイルにそういう命令文を加えるということでよいのでしょうか？？

私にjavascriptの知識がなくついていけてません…。
もう少し勉強して出直します> <;;
ありがとうございました。

せっかく教えて下さったのにすぐ理解できず申し訳ありませんでした！