こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

投稿日時 - 2011-08-09 17:17:26

QNo.6931990

すぐに回答ほしいです

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

そのURLのサイトもページ全体がスクロールしていますよ?
メニューボタンだけ、張り付いているだけで……

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

投稿日時 - 2011-08-09 17:44:38

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

おそらく、やりたいことはフレームを使わずにフレームページっぽいHPを作りたいんだと思いますが…
ここがサンプル付きで参考になると思います
http://www.otchy.net/sample/ie6fixed.html

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

投稿日時 - 2011-08-25 01:49:54

ANo.2

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>

投稿日時 - 2011-08-09 19:19:01

あなたにオススメの質問