• ベストアンサー

ページトップへスクロール

webページをスクロールしていくと最後に「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるjavaを使用しているんですが、javaをオフにしているユーザーのために、同じリンクボタンで普通のアンカーでトップページに切り替わる（name属性を使った方法）のも併用したいのですがどうすれば良いのでしょうか。 リンク部分のソースはこれです。 <a href="javascript:pageup()">pagetop</a>

  • ao_
  • お礼率59% (112/189)

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

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

最初に訂正。 JavaとJavaScriptはまるっきり違うものなので、Javaと書くと回答される方が困惑します。 で、方法ですが、 <script type="text/javascript"> <!-- document.write('<a href="javascript:pageup()">pagetop</a>'); // --> </script> <noscript> <a href="#pagetop">pagetop</a> </noscript> とすることで、JavaScriptが有効な人には <a href="javascript:pageup()">pagetop</a> が表示され、 JavaScriptが無効、もしく対応していないブラウザの人には <a href="#pagetop">pagetop</a> が表示されるようになります。

ao_
質問者

お礼

ありがとうございます。 また、ご指摘ありがとうございます。 JavaScriptに関しては全くの素人なので続けてお伺いしたいのですが、ご回答頂いた<script type="text/javascript">～</noscript>はhtml内に書くのでしょうか。できれば外部JavaScriptで済ませたいのですが…　

その他の回答 (2)

noname#110531
noname#110531
回答No.3

呼び出す部分は<body></body>内に書くので、外部.jsからというのはちょっと難しいですね。 また、<noscript>はJavaScript無効の方へ必須なので、どうしても書かなくてはなりません。

ao_
質問者

お礼

ありがとうございます。 見事にできました！

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

<script language=javascript> <!-- document.write('<a href="javascript:pageup()">pagetop</a>'); //--> </script> <noscript> <a href="#">pagetop</a> </noscript> 可能であれば、ページの頭にアンカーつけておくと 確実性があがります。 <a name="top"></a>

ao_
質問者

お礼

ありがとうございます。 「href="#"」はそのページ自体を再度読み込み頭から表示されている状態にするってことですよね。確かに挙動は<a name="top"></a>を使った時と同じですね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでスクロール

    下記のhtmlソースでjavascriptでスクロールしてトップに戻るリンクを作ったんですが、WinのIEではスクリプトが効かずnoscript内の通常のアンカーが有効になってしまいます。 Firefoxではjavascriptの有効無効を判断して思った通りに動きます。WinIEでもjavascriptが有効のときはスクロールし、無効の時は通常のアンカーになるようにするにはどうすればいいのでしょうか？ WinIEはセキュリティの設定でjavascriptを有効にしてあります。 <script language=javascript> <!-- document.write('<a href="javascript:pageup()">pagetop</a>'); //--> </script> <noscript> <a href="#pagetop">pagetop</a> </noscript>

  • ページの先頭へスクロールして戻るには

    こんにちは。 HTMLでボディタグ直後に<a name=pagetop"></a>などとしておき、ページの下部において「ページの先頭へ」とか「ページトップ」とか「PAGETOP」とかというリンクを設け、そのリンクをクリックすればページの一番上に戻らせるというHTMLのみでできる方法がありますが、そうでなくて、これをスクロールさせながら戻らせるようにしたいんです。 例えば以下のホームページが実例としてあります。 「ページトップ」という文字をクリックすると上記のようになります。 http://www.yamaha.co.jp/siteusage/index.html もちろん、このサイトのやり方と同じでなくても構いません。よりスマートなソース・やり方で出来ればそれが一番と思います。 JavaScriptは初心者でお恥ずかしいですが、これはぜひとも出来るようになりたいです。頑張ります。 どなたかどうぞ教えてください！ 宜しくお願いいたします。

  • クリックするとするするとスクロールさせたい(JS)

    Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }

  • スクロールしてページトップへ

    「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるような（参考：http://www.endoritsuco.com/disc.html、http://www.mienai.com/about_orthodontics/index.html等）javacsriptを探しています。 javascriptは初心者なので、どこかでスクリプトを配布してたりすると嬉しいのですが。 書籍でも構いませんので情報をいただければと思います。

  • 前のページに戻るとページトップに戻るの併用方法

    ホームページのページ内に前のページに戻るボタンとページトップ（同ページの最上部）に戻るボタンの両方をJavaScriptで設置したいのですが、方法がわかりません。 前のページに戻るは <a href="javascript:history.back()">戻る</a> としています。 ページトップ（同ページの最上部）に戻るは <a href="javascript:scrollTo(0,0);undefined;" onclick="return false;">ページトップに戻る</a> としています。 以上の両方を併用する方法を教えていただけないでしょうか？ よろしくお願いします。

  • ページTOPへのリンク

    ページ途中に ▲このページのTOPに戻る というような、アンカーテキストを入れたいのですが、 ご相談にのってください。 ページ頭部分に、 <a name="top">○○</a> この○○、入れないとやはりだめでしょうか？ <a name="top">○○</a> がなくても戻れるくらいなので、戻れることは戻れるのですが… ページ頭に、サイトバナー、パンくずリスト、などがあり、 どれもすでにアンカーテキストなのです。 なので、重ねて入れることも出来ず、<a name="top"></a> だけでムリなのかと…。 またはほかに、なにか良い方法があれば教えてください。

    • ベストアンサー
    • HTML
  • <a href="#pagetop">以外での移動方法

    <a href="#pagetop">ページトップ</a>以外での、同一ページ内の移動方法を教えてください。 ページの先頭に、 <a name="pagetop"></a> を置いておいて、ページの下のほうに、 <FORM> <INPUT TYPE=button value="ページトップ" onclick="JavaScript:location.hash='#pagetop'"> </FORM> これで、移動できるのですが、これですとボタンになってしまいます。 普通のテキスト、もしくは画像にしたいのですが、どのようにしたら良いでしょうか？ よろしくお願いします。

  • ページ内アンカーに移動しない：

    ページ内アンカーに移動しない： あるページ"A"に <div id = "TOP"></div>と設定し ページ"B"に <a href="test.html#TOP">test<a> と設定しました。 動作確認をした結果、Firefox・クロムと正常に動くのですが IEが全バージョンで、該当ページに飛ぶのですが、アンカーに 移動しません。 ローカルにてテストをした結果、IEで通常に移動します。 調べた所、 javascript等が使用されているとリンク先ジャンプ後にセキュリティの確認 が有るため、アンカーリンクが消されると書いてあったので javascript部分を全て削除し、動作確認をしたのですが やはりアンカーに飛んでくれません。 どなたか、ご教示ください。

  • リンク先の違うページの指定場所へスクロールさせ表示させたいです。

    リンク先の違うページの指定場所へスクロールさせ表示させたいです。 リンクをクリックすると、アンカー先に飛ばし 画面を、常に下に-100ずらして表示させています。 同ページ内の場合は、 location.href = "#●●"; window.scrollBy( 0, -100 ); で対処できましたが、 違うhtmlのアンカーに飛ばし、下にずらして表示させる場合は どのようにするのか方法がわかりません。 Javaスクリプトに不慣れなので、 どなたかご存知の方、よろしくお願いいたします。

  • iframeからのリンクでスクロールさせるには

    scrollsmoothly.jsを使用させもらっています。 iframe内にtarget="_top"でリンクを設置。 ※リンク先はiframeを表示しているページ内へのアンカーリンクです。 iframeでscrollsmoothly.jsを読み込んでもスムーズスクロールされません。 iframeが表示されているページに読み込んでも同じです。 target="_top"を外せばフレーム内でスクロールするのですが、 フレーム内でリンクさせたいわけではないので、どうしてもこれを外せません。 iframe内からのアンカーリンクでスムーズスクロールするにはどのようにすればよいでしょうか。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する