• 締切済み

webページで横方向にアンカーを付けたい

web画面で、横方向に長くスクロールがあるものにアンカーを付け その場所にリンクするようにしたいです。 htmlのみではおそらく不可能かと思いますが、JavaScriptにより 可能でしょうか。 記述方法を教えていただきたいです。 ちなみに、php&JavaScript初心者です。 よろしくお願いしますm(__)m

みんなの回答

  • MrYoYoYo
  • ベストアンサー率33% (38/115)
回答No.2

すでに回答がありましたが、念のため。 アンカーを普通に貼った場合に、クリックすると一瞬でスクロールされてしまい、画面が切り替わった用に感じます。 これをFLASHのようにスクロールしている感をだすことができます。 (参考URLではリンクをクリックすると「ギュン」とスクロールされます。) ドキュメントサイズの全体幅をとって、移動先オブジェクトの位置を取得して、winName.scroll(x,y); などを使って、スクロールしてあげることができます。

参考URL:
http://www.doko.jp/search/help.do?pg=3_2
noname#39970
noname#39970
回答No.1

アンカーの張り方は普通で良い。 実際そのアンカーをfocusするとそこへスクロールできる。 なので後は横長にする方法を考えたらよい。 通常はcssの white-space:nowrap やtableやhrなどで必要な長さを確保するという技を駆使する。

関連するQ&A

  • Webサイトでアンカーポイントへスクロールさせる方法

    当方Webサイト作成の初心者です。 初めての教えてGOOですが、どうぞ宜しくお願い致します。 Webサイト作成で、 アンカーポイントへの移動をスクロール形式(視覚的に)にするには、 どうすれば良いのでしょうか? 普通、Webサイトで同ページ内のアンカーポイントへの移動は 「パッ」と切り替わりますよね。 これを、「パッ」ではなく、視覚的に、「ググーン」とスクロールしながら 指定したアンカーポイントにたどりつき、ゆるやかに着地するものを 作成したいと思っております。 http://www.amwaylive.com/top/top.php このサイトではそれが使われています。 フレーム使用のサイトなので下の階層になりますが、 ヘルプ→化粧品とかのページでみればアンカーポイントへの ググーンとしたスクロールが見られます。 この方法をネットで色々探してみたものの、有用な手がかりが 得られませんでした。 ちなみに当方 DreamWeaver2004MX を使用しています。 当方のWebサイト(現在構築中)はフレームは使用しておりません。 アンカーポイントを使用したいページは縦長のページです。 どなたかお分かりの方、どうぞお教えください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • フレームページから別フレームのアンカーへ

    あるフレームAからフレームBへ移るとき、 同時に子ページのアンカーへもリンクのさせたいのですが、 検索しても「いくつか方法がある」という記述は発見できたものの、 そのものズバリ、Javascriptが記述されたページが見つからず、 途方に暮れています。 a.html(フレームA)  a-1.html  a-2.html b.html(フレームB)  b-1.html  b-2.html   #b-2a、#b-2b、#b-2c・・・ 上記のような場合なのですが、 単純に考えればb-2.htmlのそれぞれのアンカーを指定した フレームページをアンカーの数だけ作ればよいのですが、 アンカーが数百単位で存在し、 フレームBだけではなくフレームC、D、E・・・と フレーム自体も数が多いので、後々のメンテナンスを考えると Javascriptで行う方が良い気がしています。 どなたか解決方法をご存知でしょうか?

  • PHPファイルのアンカーリンク

    PHPファイルのURLにアンカーリンクをつけているのですが、ページは表示されますが、アンカーリンクの指定の場所へ飛びません。表示後、F5キーを押してもダメで、エンターキーを押すと飛びます。 仕様ですが、あるページ内に複数のテキストリンクがあり、そのテキストリンクをクリックすると、一度ログイン画面に移動します。 ID・パスワードを入力してログインボタンを押すと、元のページに戻ります。 この時にアンカーリンクでクリックしたテキストリンクの場所に表示位置を移動したいのですが、なぜか移動ができません。 念のため、PHPファイルではなく、htmlファイルで試してみたのですが、こちらは飛びました。 なぜPHPだとだめなのか調べてみたのですが原因がわかりません。 ちなみに元のページのURLは参照渡しです。 たぶん本来ならcookieやセッションで対応するのかと思うのですが、まだ知識や経験が足りずこのような方法をとっています。 よろしくお願いします。

    • 締切済み
    • PHP
  • 別ページからのアンカーリンクについて

    現在、下記jqueryを使用して横スクロールサイトを制作中です。 http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ 上記サイトを参考に 設置し問題なく動作しているのですが、 アンカーリンクを使用して 別ページから、各コンテンツにジャンプさせたいと思っています。 設置しているナビゲーションメニューからだと スムーズにスクロールし、正常に動作(コンテンツが一番左の位置でストップ)するのですが、 別ページから ○○.html#アンカーリンク名 というふうに リンクを張ると、表示位置が一番左の位置ではなく スクロールの途中でずれて止まってしまいます。 CSSも含め色々といじってはみたのですが まったく原因がつかめず苦戦しております。。 以下のスクリプトでは、ナビゲーションのリンクをクリックすると 動作するようにしていますが、 アンカーリンク名が○○の場合は、○○に表示させる といった命令のようなことはできるのでしょうか? 知識不足で申し訳御座いませんが お分かりの方がおられましたら宜しくお願いいたします。 $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); }); });

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

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

  • エクセルで横スクロールをジャンプで簡便化したい!

    とても横方向に長い表に入力作業をしています。 縦方向は日付、横方向に入力項目があります。 ウインド枠を固定させて項目表示されるように設定していますが、横方向に長いため、スクロールが大変です。 現在は、ハイパーリンクを使ってボタン的に使用しようかと考えております。 項目名をリンク先にしてリンク元の名前をクリックすれば、その項目のところへジャンプでき、わざわざスクロールしなくてもすむと考えたからです。 ところが、縦方向にスクロールして入力するくらいのセル番地でハイパーリンクを使ってジャンプすると、縦方向のスクロールが元に戻ってしまいます。 横方向は楽になったのですが、今度は縦方向にスクロールしなくてはなら無い状況になります。 ちなみに、リンク元の名前は、ウィンド枠の固定で固定した左上に作ってあります。 それと、名前を定義して範囲指定で項目を表示させるようにやってみましたが、同じ結果でした。 どなたか、ジャンプで横スクロールを楽にする方法を教えてください!

  • 横にスムーズスクロールしたい

    以前似た質問をしたのですが少し進展があったのでもう一度質問させて下さい。 私はjavascriptにはほとんど詳しくないものです。 複数のリンクを横に並べ、「次へ」のボタンをクリックすると横にスムーズにスクロールするjavascriptを組みたいと思っています。 今考えているのは http://youmos.com/reference/smooth_scroll.html こちらのサイト様の横バージョンを作りたいと思っています。 色々と試行錯誤してみましたが横にスクロールすることがうまくできなかったためどなたかご教授願えないでしょうか… 宜しくお願い致します。

  • shtmlでアンカー

    shtmlファイルでサイトを作成していますが、同ページ内にリンクを貼るアンカーがうまくいきません。htmlならうまくいくんですが、できればshtmlファイルで作成したいと思っています。何かいい方法はないでしょうか? 他の質問でjavascriptでもできるとあったので、他に方法がなければ調べてみようとは思っています。ただ、javascriptを無効?にしている人には使えないという事でどうしたらいいんだろうと悩んでいます。 javascriptでしか他に方法がない場合は、わかりやすく説明してあるサイトなど教えていただけるとありがたいです。よろしくお願いします。

  • 画面表示とともに、テーブルの横スクロール位置を指定したい

    HTMLおよびJavaScriptに関して教えてください。 現在HTMLにテーブルタグを使用して、5か月分の日割りの表を作成しています。横に日付を設定する必要性から、テーブルの横スクロールを出して1画面で見せています。(かなり長い横スクロールのテーブルです) このとき、前月、今月、次月、次々月、次々次月と表示することとなり、表の始まりが前月となっています。 要望としては、画面を開いたときに、今月の位置で横スクロールされた状態になっていて欲しいのです。 縦の位置であれば、アンカーを使えば良さそうですが、テーブル内の横スクロールの制御は出来なそうで、、、 以上、よろしくお願いします。

  • 横方向のスクロールをなくしたい

    縦3分割(cols="*,700,*")のフレームにし、真ん中だけ遷移させるページを作成しているのですが、CSSで、 body{ overflow-x:hidden; } と設定しているのですが、横方向にスクロールされてしまいます。フレームの値(width)より真ん中のページに置く幅の値が等しいか同値であるのですが、何か設定が要るのでしょうか? 因みに縦はスクロールします。(真ん中のフレームのみ) 考えてみましたが、結論が出そうになかったので教えてください。お願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう