- ベストアンサー
ページ内リンクをスクロール移動させる方法
このサイトのように、メニューをクリックすると コンテンツ側のエリアだけスクロールするようにさせるには どうすればいいのでしょうか？ http://www.yurikago.or.jp jQueryを使ったページ内スクロールの方法は色々なサイトで紹介されていたのですが、 どれもページ全体がスクロール移動するものだったので、質問させて頂きました。 （あるいはページ全体がスクロールするものを少しアレンジすれば、可能なのでしょうか？） 教えて頂けましたら幸いです。
- hiyokomoti
- お礼率48% (63/130)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
そのＵＲＬのサイトもページ全体がスクロールしていますよ？ メニューボタンだけ、張り付いているだけで…… よく見ればメニューの下の背景も一緒に移動しています。
その他の回答 (2)
- yui56544
- ベストアンサー率69% (85/123)
おそらく、やりたいことはフレームを使わずにフレームページっぽいＨＰを作りたいんだと思いますが… ここがサンプル付きで参考になると思います http://www.otchy.net/sample/ie6fixed.html 基本的にはメニューを囲うDIV要素をスタイルシートの positionを使って固定します 上記サイト以外で参考ページが必要であれば「CSS 擬似フレーム」と検索するとかなり多くの解説サイトを見つけることができるので、参考にしてみると良いと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
fixで良いでしょう。IE5とか古いブラウザ用にJQueryを併用する。 その場合、下記のソースはjqueryを使わず、新しいブラウザ用のスタイルシートの部分が多々あるのでそれらも直さなければなりません。兄弟(隣接セレクタ)やa以外への動的な擬似クラス:hoverについてです。 ＿はタブに戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{padding:0;margin:0;} body>div>*{margin-left:300px;} div.section{min-height:400px;} div.section{background-color:rgb(255,200,200);} div.section+div.section{background-color:rgb(255,255,200);} div.section+div.section+div.section{background-color:rgb(200,255,200);} div.section+div.section+div.section+div.section{ ＿background-color:rgb(200,255,255); } div.section+div.section+div.section+div.section+div.section{ ＿background-color:rgb(200,200,255); } div.table_content ol,div.table_content ol li{ ＿display:block;list-style:none;margin:0;padding:0; } div.table_content ol{ ＿height:100%;position:absolute;position:fixed;top:0;left:0; ＿width:200px;background-color:rgb(120,80,0);padding:60px 20px; } div.table_content ol li{ ＿width:1em;float:right;margin-left:10px;height:200px; ＿position:relative;border:solid 1px white; } div.table_content ol li a{ ＿text-decoration:none;display:block;width:100%;height:100%; } div.table_content ol li a:hover{background-color:white;} div.table_content ol li:hover a:before{ ＿content:"◎";position:absolute;top:-1em; } --> ＿</style> </head> <body> ＿<div class="header" id="top"> ＿＿<h1>サンプル</h1> ＿＿<div class="article"> ＿＿＿<p>メニューを固定して本文を長く</p> ＿＿</div> ＿</div> ＿<div class="section" id="section1"> ＿＿<h2>第一章</h2> ＿</div> ＿<div class="section" id="section2"> ＿＿<h2>第二章</h2> ＿</div> ＿<div class="section" id="section3"> ＿＿<h2>第三章</h2> ＿</div> ＿<div class="section" id="section4"> ＿＿<h2>第四章</h2> ＿</div> ＿<div class="footer"> ＿＿<h3 id="documentInfo">Document Information</h3> ＿＿<dl> ＿＿＿<dt>First Published</dt> ＿＿＿<dd>2010-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2011-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<div class="nav table_content"> ＿＿＿<ol> ＿＿＿＿<li><a href="#top">最初</a></li> ＿＿＿＿<li><a href="#section1">第一章</a></li> ＿＿＿＿<li><a href="#section2">第二章</a></li> ＿＿＿＿<li><a href="#section3">第三章</a></li> ＿＿＿＿<li><a href="#section4">第四章</a></li> ＿＿＿＿<li><a href="#documentInfo">文書情報</a></li> ＿＿＿</ol> ＿＿</div> ＿</div>＿ </body> </html>
