web-dev-qa-db-ja.com

CSS：純粋なCSSスクロールアニメーション

CSS3のみを使用してページの上部にあるボタンをクリックしたときにスクロールダウンする方法を探していました。

だから私はこのチュートリアルを見つけました： http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

デモ： http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

しかし、ページの上部にあるボタンをクリックするだけでブラウザを下にスクロールしたいので、私のニーズには少し高度すぎますので、入力ボタンなしでCSSスクロールを行うことは可能ですか？アンカータグ付き？

HTMLは次のようになります：<a href="#" class="button">Learn more</a>

ボタンのクリックでトリガーする必要のあるCSSが既にあります。

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}
css3scrollanchortransition
73
blameless75

Css3 :target擬似セレクターを使用してアンカータグでこれを行うことができます。このセレクターは、現在のURLのハッシュと同じIDを持つ要素が一致したときにトリガーされます。 例

これを知っているので、このテクニックと「+」や「〜」などの近接セレクタを使用して、現在のURLのハッシュと一致するIDを持つターゲット要素から他の要素を選択できます。この例は、 あなたが尋ねている のようなものです。

84
Jesus Bejarano

すべての主要なブラウザをサポートしていない （Firefox 36以降、Chrome 61以降、およびOpera 48以降のみ）を気にしない場合は、アンカーリンクを使用しますスクロールコンテナのこの単一のプロパティ：

scroll-behavior: smooth;

MDNリファレンス を参照してください。

次のように使用します。

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

Fiddle です。

そして、これも Fiddle で、水平スクロールと垂直スクロールの両方があります。

97
Felix Edelmann