スクロールバーを出さずにスクロール

[新着] Webテンプレートを仮オープンしました

0   名前： nayuta ： 2007/05/22（火） 20:00  ID:ccUsT3Xi sub-Cl
http://www.cssremix.com/showcase/jobsandgigs

上記のサイトのように、[ Toggle Details/Screenshot ] のリンクを押すと、
非表示になっていた内容がスクロールして出てくる、ようなスクリプトを探しています。
もっとも、この場合はCSSでの指定も関係していると思いますが、
javascript:void(0)と指定しているだけで、スクロールバーを出さずに非表示の内容がスクロールして出てくるようなページを作りたいのです。

ぜひご教授お願いします。
1   名前： 匿名 ： 2007/05/22（火） 20:00  ID:OF72WdCi sub-Cz
<div style="overflow: hidden; width: 400px; height: 300px; ">
  <div style="position: relative; top: 0px; ">
    <!-- 内容 -->
  </div>
</div>

簡単な CSS の応用問題。あとは、内側の top を増やせば上方に、減らせば下方にスクロールするように見える。
2   名前： nayuta ： 2007/05/22（火） 20:00  ID:ccUsT3Xi sub-Cl
匿名さん、レスありがとうございます。

早速、教えていただいた方法でやってみたところ、
スクロールしているような感じになりました。

ただ、表示されていないブロックにidを振り分けて、
そこに飛ぶようにリンクを貼って、
そのリンク先に飛ぶ際にゆっくりとスクロールする、という表現がしたいのですが、
これはスクリプトでどうにかなるものでしょうか?
<a href="#box2">box2の内容を表示</a>
というリンクを貼って、

<div style="overflow: hidden; width: 400px; height: 300px; ">
<div id="box1">
内容
</div>
<div id="box2">
内容
</div>
</div>

box2の内容が表示される際に、ゆっくりとスクロールされる、
という感じにしたいのですが。

3   名前： nayuta ： 2007/05/22（火） 20:00  ID:ccUsT3Xi sub-Cl
重複投稿すみません。

mootoolsで実装する方法が見つかりましたので、
これで解決しました。

匿名さんありがとうございました。
4   名前： 匿名 ： 2007/05/22（火） 20:00  ID:rDRn5rzb sub-Cz
div#box2 の親ボックスを位置指定して包含ブロックにしておけば（具体的には、position に relative/absolute/fixed のどれかを与える）、div#box2 ボックスの上辺から親ボックスの上辺までの距離 px は、getElementById('box2').offsetTop でとれます。

「ゆっくりとスクロールする」方は、目的地に着くまで、setInterval() で top に一定量を加算していくだけです。これはサンプルが沢山公開されていると思います。
一覧へ戻る