web-dev-qa-db-ja.com

Webページ上の異なるdivセクションにスクロールダウンするhtml / cssボタン

誰かが私を助けてくれますかcss/htmlコード例を探しています：

3つのボタン（上、中、下）がそれぞれ1ページのdivセクションに指定されたWebページがあり、最初のdivセクションがそのページの中央にあるとしますdiv id='middle'。

このボタン（中央）をクリックすると、ページは自動的にページの上部からdiv #middleセクションまで下にスクロールします。

div id='top'およびdiv id='bottom'を参照する他のボタンについても同じ

よろしくお願いします！インターネットで解決策を見つけることができませんでした。

セクションを移動する間、ボタンリストを画面上に固定するために、ボタンリストを固定位置に保持する方法はありますか？

csshtmlbuttonscroll
19
JayD

本当に基本的な何かのためにこれを使用します：

<a href="#middle">Go To Middle</a>

または、javascriptのシンプルなものについては、このjQueryプラグインを確認してください ScrollTo 。スムーズにスクロールするのに非常に便利です。

27
rncrtr

これを試して：

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
30
Waqleh

[〜＃〜] html [〜＃〜]

<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div id="top"><a href="top"></a>Top</div>
<div id="middle"><a href="middle"></a>Middle</div>
<div id="bottom"><a href="bottom"></a>Bottom</div>

[〜＃〜] css [〜＃〜]

#top,#middle,#bottom{
    height: 600px;
    width: 300px;
    background: green; 
}

例http://jsfiddle.net/x4wDk/

11
Kevin Bowersox

JavaScriptを使用せずにスムーズなスクロール効果を得るためのはるかに簡単な方法があります。 CSSでは、htmlタグ全体をターゲットにして、スクロール動作を指定します。

html {
  scroll-behavior: smooth;
 }
 
 a {
  text-decoration: none;
  color: black;
 } 
 
 #down {
  margin-top: 100%;
  padding-bottom: 25%;
 } 
<html>
  <a href="#down">Click Here to Smoothly Scroll Down</a>
  <div id="down">
    <h1>You are down!</h1>
  </div>
</html

「スクロール動作」はページのスクロール方法を指示するもので、javascriptを使用するよりもはるかに簡単です。 Javascriptを使用すると、速度とスムーズさに関するオプションが増えますが、これにより、混乱を招くコードがすべてなくなります。

7
ihayes83