css Keyframe-Animation beim Klicken auf einen Anker ('#') link

Question

Ich habe einen Link <a href="#test">link to test</a> und wenn Sie darauf klicken, springt die Seite sofort zum 'Test'-Inhalt. Wie kann ich einen Übergang hinzufügen, wenn ich zwischen diesen In-Page-Links umschalte? Vielen Dank: D

EDIT: Es wäre schön, wenn ich ein CSS-Keyframe anstelle der JQuery-Animation verwenden könnte. Wer eine Lösung?

Answer 1

gefunden habe Der schnellste Weg wäre laden in jQuery und fügen Sie dieses Snippet.

Schritt 1: Legen Sie jQuery Script-Tag vor dem letzten body Tag (</body>)

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

Schritt 2: Fügen Sie diesen Schnipsel unten

<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> 

Sie bearbeiten können, wo es heißt 1000 die sich ändern Geschwindigkeit und Sie können auch scrollTop: $($.attr(this, 'href')).offset().top hinzufügen oder subtrahieren, um zusätzlichen Offset von Ihrem Element zu erhalten.

Beispiel: Dies wird 100 Pixel über Ihrem Element statt genau oben sein.

Answer 2

Ich nehme an, Sie meinen, sanft zum Ziel zu blättern, anstatt dort abrupt zu springen. Wenn ja, hier ist ein Weg mit Javascript und 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

Hier ist ein jquery Beispiel:

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

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

und eine Geige: http://jsfiddle.net/9SDLw/. Weder der Code noch die Geige sind meine, es ist eine Antwort, die ich hier Smooth scrolling when clicking an anchor link

Answer 4

Dies ist mit CSS-Animations-Keyframes nicht möglich. Die Scroll-Position ist keine CSS-Eigenschaft, die beeinflusst werden kann. Sie können die Position des Seiten-Scrolls mit Javascript oder einer Anzahl von Javascript-Bibliotheken (zB: jQuery) ändern.