ページ内リンクをスクロール移動させる方法

解決済

質問者：hiyokomoti
質問日時：2011/08/09 17:17
回答数：3件

このサイトのように、メニューをクリックすると
コンテンツ側のエリアだけスクロールするようにさせるには
どうすればいいのでしょうか？
http://www.yurikago.or.jp

jQueryを使ったページ内スクロールの方法は色々なサイトで紹介されていたのですが、
どれもページ全体がスクロール移動するものだったので、質問させて頂きました。
（あるいはページ全体がスクロールするものを少しアレンジすれば、可能なのでしょうか？）

教えて頂けましたら幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： sara_seiji
回答日時：2011/08/09 17:44

そのＵＲＬのサイトもページ全体がスクロールしていますよ？

メニューボタンだけ、張り付いているだけで……

よく見ればメニューの下の背景も一緒に移動しています。

- 0
- 件

通報する

No.3

回答者： yui56544
回答日時：2011/08/25 01:49

おそらく、やりたいことはフレームを使わずにフレームページっぽいＨＰを作りたいんだと思いますが…

ここがサンプル付きで参考になると思います
http://www.otchy.net/sample/ie6fixed.html

基本的にはメニューを囲うDIV要素をスタイルシートの positionを使って固定します
上記サイト以外で参考ページが必要であれば「CSS 擬似フレーム」と検索するとかなり多くの解説サイトを見つけることができるので、参考にしてみると良いと思います。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/08/09 19:19

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">

＿</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>