アンカー（ '＃'）リンクをクリックするとCSSのキーフレームアニメーションが表示されます

Question

私はリンク<a href="#test">link to test</a>を持っています。クリックすると、ページは即座に 'テスト'コンテンツにジャンプします。 このページはめ込みリンクを切り替える際にどのように移行を追加できますか？ 非常にありがとうございます：D

EDIT： jqueryアニメーションの代わりにCSSキーフレームを使用できるといいですね。 誰かが解決策ですか？

Answer 1

最速の方法を発見した答えです。

ステップ1：終了bodyタグの前に挿入jQueryのスクリプトタグ（</body>）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

ステップ2：それは1000を変更すると言うあなたが編集することができ

<script> 

     // Bind all a href clicks to this function 
     $(document).on('click', 'a', function(event){ 

      // Prevent default events 
      event.preventDefault(); 

      // Animate the body (html page) to scroll to the referring element 
      $('html, body').animate({ 
       scrollTop: $($.attr(this, 'href')).offset().top 
      }, 1000); 

     }); 

    </script> 

以下このスニペットを挿入scrollTop: $($.attr(this, 'href')).offset().topを加算または減算して、要素からのオフセットを追加することもできます。

例：要素の上に正確に配置するのではなく、要素の100ピクセル上に配置します。

scrollTop: $($.attr(this, 'href')).offset().top - 100 

Answer 2

突然ジャンプするのではなく、スムーズにスクロールすることを意味しています。もしそうなら、javascriptとjQueryを使う方法があります。ここで

$(function() { 
 
    $('a[href*="#"]:not([href="#"])').click(function() { 
 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
     $('html, body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 
});

div { 
 
    min-height: 200vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#test">test</a> 
 
<div></div> 
 
<div id="test">test</div>

Answer 3

jQueryの例である：

$(document).on('click', 'a', function(event){ 
    event.preventDefault(); 

    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
}); 

とフィドル：http://jsfiddle.net/9SDLw/。 コードもフィドルどちらが私のしている、それは私がここにjQueryの負荷もこのスニペットを挿入するSmooth scrolling when clicking an anchor link

Answer 4

これはCSSアニメーションキーフレームでは不可能ですが、スクロール位置は影響を受けるCSSプロパティではありません。 Javascriptやいくつかのjavascriptライブラリ（例：jQuery）を使用してページスクロールの位置を変更することができます。