![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_11.png?5a7ff87)
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;
}
}
続きは補足欄に書かせていただけそうなら書きます。
中途半端な情報かつ長文で申し訳ありません。
どんな些細なことでも構いませんので、アドバイスいただけないでしょうか。
どうぞよろしくお願いいたします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_05.png?5a7ff87)
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/cumulativ …
$('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
- 回答日時:
> これをpage2.htmlからpage1.html#aにリンクさせる際にもスムーズスクロールで移動させるにはどうしたら良いのでしょうか?
window.onloadのタイミングでwindow.location.hashに何か入ってたらスクロールを開始してみてください。
ちなみに<div id="hoge">という書き方でも<a href="#hoge">が有効です。
ご回答ありがとうございます。お礼が大変遅くなり、申し訳ありません。
>window.onloadのタイミングでwindow.location.hashに何か入ってたらスクロールを開始してみてください。
とは、現在のjavascriptファイルにそういう命令文を加えるということでよいのでしょうか??
私にjavascriptの知識がなくついていけてません…。
もう少し勉強して出直します> <;;
ありがとうございました。
せっかく教えて下さったのにすぐ理解できず申し訳ありませんでした!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- Ruby vscode 文字化け 1 2022/05/21 19:17
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
「nullまたはオブジェクトでは...
-
javascript 特定のタグのidの存...
-
任意の座標をクリックさせるには
-
<a>タグのテキストを取得
-
配列の大括弧と丸括弧はどう違う?
-
div要素内の全input要素をdisable
-
javascript 作成した要素にCS...
-
javascript画面を自動で切り替...
-
JavaScriptのストップウォッチ...
-
DOMMouseScrollを使って特定のI...
-
JavaScriptによるundefined判定...
-
javascriptでスロットゲームを...
-
javascriptで編集可能不可能の...
-
javascript の 命令文の記述で...
-
google apps scriptの終了のさせ方
-
翌月を取得するGASが分かりません
-
GASでundefinedエラーが出ます
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
任意の座標をクリックさせるには
-
javascript 特定のタグのidの存...
-
onchangeイベントを使ってspan...
-
HTML:Tableタグに対し、JavaScr...
-
モーダルダイアログウィンドウ...
-
日本語入力の禁止
-
javascriptでCSVを呼出しvlookup
-
Click回数を数え、規定された回...
-
画像上のクリックした場所が分...
-
【Tabキー】特定の範囲内だけで...
-
配列の大括弧と丸括弧はどう違う?
-
重複しないくじの作り方がわか...
-
javascriptで、表示されている...
-
div要素内の全input要素をdisable
-
javascriptであるボタンを押す...
-
javascriptで自動計算フォーム...
-
RadioButtonListの表示制御
おすすめ情報