Naar beneden scrollen

In HTML5 kun je ook navigeren naar id's. Volgens dit topic heeft id="foo" zelfs voorrang voor name="foo".

Dat was mij nog niet bekend, heb ik weer wat geleerd ;-)
Nu nog een uitzoeken hoe je vervolgens smooth kan scrollen met CSS naar dat element.

Bijvoorbeeld met Ceaser maak je in een handomdraai de CSS-code voor een animatie-effect. Als je de "easing" instelt op een curve, bijvoorbeeld "ease-in-out", oogt dat zelfs bijna biologisch verantwoord natuurlijk.

Bedankt!

Ik heb de css code maar aan wat moet ik die koppelen? aan de #portfolio?

Koppel de CSS-code aan de HTML-elementen die je een animatie wilt meegeven. Als je de CSS-code in body {...} gebruikt, wordt alles geanimeerd, maar je kunt mooiere effecten bereiken door alleen bepaalde HTML-elementen, klassen of ID's een animatie mee te geven. Gewoon mee spelen.

Ik heb hem aan de * en de html en de body elements geprobeerd maar maar hij doet het niet

>> maar hij doet het niet

Wie doet wat niet en wat doet wat wel?

De animatie doet het niet

Wat is je code nu? En die CSS3 animatie doet het niet in verouderde browsers.

 -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */