- 締切済み
外部ページからハッシュタグ（＃）のリンクへ正しく飛ばない
外部のページから、ハッシュタグを加えたURLを指定し 自分のページの指定した箇所を表示させたいのですが、 正しい位置に飛びません。 ・自分のページの指定箇所 <div id="■■■"> ・外部ページのリンク指定 a href="http://○○○○○.jp/#■■■" ちなみに、自分のページは基本indexのみで、 ものすごく長く、 ハッシュタグを使ったjava scriptのページスクロールで 指定箇所を行き来できるようにしています。 <script type="text/javascript"> jQuery.fn.extend({ scrollTo : function(speed, easing) { <!-- hashの取得が出来なければ、処理を中断 --> if(!$(this)[0].hash || $(this)[0].hash == "#") { return false; } return this.each(function() { var targetOffset = $($(this)[0].hash).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); $(document).ready(function(){ $('a[href*=#]').click(function() { $(this).scrollTo(1200); return false; }); }); </script> これが原因なのかわかりませんが、 現状、外部からリンクした場合は、 ページ上部の<div id="□□□">には正しく飛びますが、 何故か、ページ下部の<div id="■■■">になると すべてページ最下部に飛ばされてしまいます。 原因分かる方、いらっしゃいませんでしょうか。。
- sunn_t
- お礼率28% (4/14)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
飛ばない部分は、ページ下部でそれ以上スクロールできない位置にあるだけでは？
関連するQ&A
- 外部ページからハッシュタグ（＃）のリンクへ正しく飛ばない
外部のページから、ハッシュタグを加えたURLを指定し 自分のページの指定した箇所を表示させたいのですが、 正しい位置に飛びません。 ・自分のページの指定箇所 <div id="■■■"> ・外部ページのリンク指定 a href="http://○○○○○.jp/#■■■" ちなみに、自分のページは基本indexのみで、 ものすごく長く（height10000pxくらい）、 ハッシュタグを使ったjava scriptのページスクロールで 指定箇所を行き来できるようにしています。 <script type="text/javascript"> jQuery.fn.extend({ scrollTo : function(speed, easing) { <!-- hashの取得が出来なければ、処理を中断 --> if(!$(this)[0].hash || $(this)[0].hash == "#") { return false; } return this.each(function() { var targetOffset = $($(this)[0].hash).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); $(document).ready(function(){ $('a[href*=#]').click(function() { $(this).scrollTo(1200); return false; }); }); </script> 自分のページのソースは簡略化すると 以下のような感じになります。 <body> <div id="□□□"></div> ←1番上です <div id="□□□□"></div> <div id="□□□□□"></div> <div id="■■■"></div> <div id="■■■■"></div> <div id="■■■■■"></div> ←1番下です </body> 現状、外部からリンクした場合は、 ページ上部の<div id="□□□"><div id="□□□□"><div id="□□□□□">には正しく飛びますが、 何故か、ページ下部の<div id="■■■"><div id="■■■■"><div id="■■■■■">になると 指定しても、最下部に飛ばされる状態です。 何度か検証をしてみたところ <div id="□□□□□"></div>と<div id="■■■"></div>を入れ替えた場合、 <div id="■■■"></div>は正しくリンク位置へ <div id="□□□□□"></div>は最下部へ となりました。 どうも位置（高さ）による原因のようなのですが、 さっぱりわかりません。。 原因分かる方、いらっしゃいませんでしょうか。。。。。。
- ベストアンサー
- JavaScript
- リンクを新しい窓で開きたい
ページ内の外部リンクのみ、新窓で開きたいなと考え、『javascript 新窓』で検索した際に見つけた方法にID指定というものがありました。試してみたところ、一つ目のIDしか反映されませんでした。記述方法を変えれば、複数IDを指定することが可能なのでしょうか？ ご指南お願い致します。 #HTML例 ###################### <p id="sample"> <a href="sample.html">サンプル1</a> </p> <p id="sample2"> <a href="sample2.html">サンプル2</a> </p> #script記述例 ###################### window.onload = getSrc; function getSrc() { var x = document.getElementById('sample','sample2').getElementsByTagName('a'); for (var i=0; i<x.length; i++) { x[i].onclick = function () { return openWin(this.href); } x[i].onkeypress = function () { return openWin(this.href); } } } function openWin(target) { open(target); return false; }
- ベストアンサー
- JavaScript
- jQueryタブメニュー内、パネル間のリンク方法。
javascript勉強中です。 立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。 下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。 （下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(".area").hide(); var tabs = $(".tab01 li"); tabs.click(function(){ var i = tabs.removeClass("active").index(this); tabs.eq(i).addClass("active"); $(".content .area").hide().eq(i).fadeIn(400); return false; }); var hash = window.location.hash.match(/#tab(\d+)/); hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0; tabs.eq(hash).click(); }); </script> </head> <body> <div id="tabs"> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1"><a href="#tab2">test1</a></div> <div class="area" id="tab2">test2</div> <div class="area" id="tab3">test3</div> </div> </div> </body> </html> 何卒宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- アコーディンパネルの別ページからのリンクについて
こんばんは。 jqueryを使ってアコーディオンパネルを実装したページを作成しました。 通常は全て閉じた状態ですが、 全てのページにパネル１～5へのリンクがあり、それをクリックすると該当のパネルが開いた状態で表示させるには、どんなスクリプトを追加するとよろしいのでしょうか？ 以下コードです。 --html（各ページのリンクの部分） <ul> <li><a href="/service/#panel01">パネル１へ</a></li> <li><a href="/service/#panel02">パネル２へ</a></li> ・・・ </ul> --html（アコーディオンパネルの部分 /service/index.html ） <h5 class="trigger" id="panel01"><a href="#">パネル1のタイトル</a></h5> <div class="accblock"> <p>パネル１のコンテンツ</p> </div> <h5 class="trigger" id="panel02"><a href="#">パネル2のタイトル</a></h5> <div class="accblock"> <p>パネル2のコンテンツ</p> </div> （省略） ---js $(document).ready(function(){ $(".accblock").hide(); $("h5.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); }); location href か hash を使うのかなと思っているのですが うまく使いこなすことができませんでした。 アドバイスをいただけたら助かります。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryでdivごとリンクする際の開き方の指定
jQueryでdivごとリンクする際に 新しいウィンドウで開くものと、同じウィンドウで開くものを分けたいのです。 下にコードを載せています。 素人なりにおかしいかと思っている点は、 同じfunction()を続けて使っているところです。 2つのスクリプトをそれぞれ1つだけ書いた時はうまく動作します。 どのように書いたらよいでしょうか？ よろしくお願いいたします。 ●新しいウィンドウで開きたいdiv要素 aaa,bbb,ccc ●同じウインドウで開きたいdiv要素 ddd,eee ------------------------------------------- <script type="text/javascript"> $(function(){ $(".aaa,.bbb,.ccc").click(function(){ window.open ( $(this).find('a').attr('href'), 'newwin' ); return false; }); }); </script> <script type="text/javascript"> $(function(){ $(".ddd,.eee").click(function(){ window.open ( $(this).find('a').attr('href'); return false; }); }); </script> -------------------------------------------
- ベストアンサー
- JavaScript
- リンクで違うページの指定箇所へ飛ばそうとしています。
リンクで違うページの指定箇所へ飛ばそうとしています。 IEやsafariでは問題なく指定箇所に飛ぶのですが、 Firefoxだと何故か指定箇所ではなく、そのページの一番下に飛んでいきます。 IEは6、7、8 safariは4.0.2で、 Firefoxは3.6.6を使用しています。 Firefoxのバグなのでしょうか？ (同じページ内の指定箇所だとちゃんと飛びます) 急ぎの為大変困っております。 ご回答お願い致します。 HTML-------------------------------------------------------------- <a href="http://～～～/●●.html#abc" /> 飛ばしたい場所 <div id="abc"> <img src="画像URL" border="0" alt="" /> </div>
- 締切済み
- HTML
- jQueryでページ内リンクに誤差が出る。
フェード効果を追加したページ内リンクをクリックすると、上に300px程ずれてしまうエラーがでてしまいます。 これを解決するにはどうすればいいでしょうか？ http://code.jquery.com/jquery-1.6.2.jsを使用 * javascript ************* (function($){ var speed = 300, active = "actve", n_active = ":not(." + active + ")", getTarget = function(elm){ var h, r = $(""); elm.each(function(){ if(h=$(this).attr("href").match(/#.+$/)) r = r.add(h[0]); }); return r; }; $.fn.extend({ changer : function(){ var t = $(this).children("a"); getTarget(t.filter(n_active)).hide(); t.click(function(){ var elm, func, t = $(this); getTarget(t.parent().children("a")).queue([]).stop(1,1); func = function(){ getTarget(t.addClass(active)).fadeIn(speed); }; elm = getTarget(t.siblings("."+active).removeClass(active)); if(elm.length) elm.fadeOut(speed, func); else func(); return false; }); } }); })(jQuery); $(function(){ $("#group1").changer(); }); * html ************* <div style="padding:500px 0 500px;">余白用</div> <div id="group1"> <a href="#text1" class="actve">１を表示</a> <a href="#text2">２を表示</a> <a href="#text3">３を表示</a> </div> <hr> <div id="text1"><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p><p>１１１１１１１１１１１１１１１１１１１１１１</p></div> <div id="text2"><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p><p>テストテストテストテストテストテストテストテスト</p></div> <div id="text3"><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p><p>３３３３３３</p></div> 上記の内容で、リンクをクリックすると切り替わったと同時に、上に戻ってしまいます。 見たところ、ランダムではなく、一定の箇所まで戻るといった感じでした。 これを直すにはどうすればいいでしょうか？
- ベストアンサー
- JavaScript
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- リンクの表示文字を変えたい
リンクの表示文字を変えようとしています。 document.link.textを使用して実現しようとしているのですが、エラーになってしまいます。 何か良い方法はありませんでしょうか。 参考までに、自分の作ったコードを記載します。 <![CDATA[ <script type="text/javascript"> function disp() { var n = q.getNumber(0); n.dispNumber(); } function Number(number) { this.number = number; } Number.prototype.dispNumber = function(){ document.write("<div style=\"position: relative;\">"); d ocument.write("<a href=\"JavaScript:q.checkNumber(" + this.number + ")\">"); document.write("<IMG src=" + this.URL + " width=" + this.size + " height=" + this.size + " name=\"img\" border=\"0\">"); document.write("<div style=\"top:" + this.size / 2 + "px; left:" + this.size / 2 + "px; position:absolute; z-index:2;\" id=\"Layer4\" align=\"center\">"); document.write(this.number); document.write("</div>"); document.write("</a>"); document.write("</div>"); } Number.prototype.setNumber = function(number){ this.number = number; } function Question() { this.number = new Array(); } Question.prototype.checkNumber = function(number) { alert(number + "がクリックされました。"); document.link.text = -100; } Question.prototype.createNumbers = function() { this.number[0] = new Number(1); } Question.prototype.getNumber = function(i) { return this.number[i]; } </script> <div id="hoge"> <script language="JavaScript"><!-- var q = new Question; q.createNumbers(); disp(); //--> </script> </div> ]]> よろしくお願いします。
- ベストアンサー
- JavaScript
- 折りたたみ部分にアンカーでリンクをつけて、リンクでとんだ時、説明部分を開いた状態にしたい
お世話になります。javascriptに関してはまだまだ素人ですが、よろしくおねがいいたします。 http://www.koikikukan.com/archives/cat_149.php のような折りたたみメニューがあるページに、 別ページから、その折りたたみメニュー部分に アンカーで飛ばす方法でリンクをつけようと考えています。 通常、折りたたみメニューはページを開いた時に閉じているのですが、 このリンクで飛んだ時のみ、ぱっと見でどこにとんだか 分かるようにするため、アンカー部分の折りたたみメニューが 開いた状態にしたいです。 しかし、どのように指定すればいいか分かりません。。 リンクにOnClickを付けて試してみたのですが、うまくいきませんでした。 なお、折りたたみ部分は複数あり、リンクでとんだアンカー部分の 説明のみが開くようにしたいです。 なにかよいアドバイスがありましたら、お願いいたします。 ＞別ページリンク指定部分 <a href="/●●/#1">折りたたみ部分へのリンク</a><br> ＞折りたたみメニュー部分 <a name="1"></a> ←※アンカーで飛ぶ <a href="#" onClick="javascript:show_hide('q1'); return false;" onkeypress="javascript:show_hide('q1'); return false;"> 折りたたみタイトル部分(※通常、ここを押すと折りたたみメニューが開く)</a><br> <div id="q1" class="qa"> 折りたたみ部分 </div> ＞折りたたみがあるページでのheadスクリプト部分 (折りたたみが関わっていると思われる部分) <script type="text/javascript"> <!-- function show_hide(tid) { if(navigator.appName.charAt(0)=='M'){ ids = tid.split(','); for (id in ids) { disp = document.all(ids[id]).style.display; if(disp == "none") { document.all(ids[id]).style.display = "block"; } else { document.all(ids[id]).style.display = "none"; } } } } function show(tid) { if(navigator.appName.charAt(0)=='M'){ ids = tid.split(','); for (id in ids) { disp = document.all(ids[id]).style.display; document.all(ids[id]).style.display = "block"; } } } function hide(tid) { if(navigator.appName.charAt(0)=='M'){ ids = tid.split(','); for (id in ids) { disp = document.all(ids[id]).style.display; document.all(ids[id]).style.display = "none"; } } } function prechange(){ if(navigator.appName.charAt(0)=='M'){ show('allpreset'); hide('q1') } loc = top.location.hash if (loc != ''){ location.hash = top.location.hash; } } //--> </script> ※折りたたみページに関しては、前任者が作ったページの為、javascript等私自身しっかり理解できてないところもあります。
- 締切済み
- JavaScript
補足
回答ありがとうございます。 いずれの箇所もスクロールはできる状態です。 自分のページのソースですが <body> <div id="□□□"></div> ←1番上です <div id="□□□□"></div> <div id="□□□□□"></div> <div id="■■■"></div> <div id="■■■■"></div> <div id="■■■■■"></div> ←1番下です </body> かなり省略するとこんな感じで 下から3つ■の箇所だけが 指定しても、最下部に飛ばされる状態です。