Pure CSS scroll animation

Question

I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only   So I ve found this tutorial  http   tympanus net codrops 2012 06 12 css-only-responsive-layout-with-smooth-transitions   Demo  http   tympanus net Tutorials SmoothTransitionsResponsiveLayout   But it s a bit too advanced for my needs since I just want the browser to scroll down on a click on one button located on top of the page  so I was wondering  is it possible to do those CSS scrolls without the input buttons  just with an anchor tag   HTML looks like this   lt a href     class  button  gt Learn more lt  a gt   I have already some CSS which I need to trigger on button click      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

User · Answer

Use anchor links and the scroll-behavior property  MDN reference  for the scrolling container   scroll-behavior  smooth    Browser support  Firefox 36   Chrome 61   therefore also Edge 79   and Opera 48    Intenet Explorer  non-Chromium Edge and  so far  Safari do not support scroll-behavior and simply  jump  to the link target   Example usage    lt head gt     lt style type  text css  gt      html         scroll-behavior  smooth           lt  style gt   lt  head gt   lt body id  body  gt     lt a href   foo  gt Go to foo  lt  a gt      lt  -- Some content -- gt      lt div id  foo  gt That s foo  lt  div gt     lt a href   body  gt Back to top lt  a gt   lt  body gt    Here s a Fiddle   And here s also a Fiddle with both horizontal and vertical scrolling

User · Answer

You can do it with anchor tags using css3  target pseudo-selector  this selector is going to be triggered when the element with the same id as the hash of the current URL get an match  Example  Knowing this  we can combine this technique with the use of proximity selectors like     and     to select any other element through  the target element who id get match with the hash of the current url  An example of this would be something like what you are asking

User · Answer

And for webkit enabled browsers I ve had good results with    myElement       -webkit-overflow-scrolling  touch      scroll-behavior  smooth     Added in from answer from Felix     overflow-x  scroll      This makes scrolling behave much more like the standard browser behavior - at least it works well on the iPhone we were testing on   Hope that helps   Ed

User · Answer

You can use my script from CodePen by just wrapping all the content within a  levit-container DIV    function           function Smooth              this  container   document querySelector   levit-container            this  placeholder   document createElement  div               Smooth prototype init   function              var instance   this           setContainer call instance           setPlaceholder call instance           bindEvents call instance              function bindEvents              window addEventListener  scroll   handleScroll bind this   false              function setContainer              var style   this  container style           style position    fixed           style width    100            style top    0           style left    0           style transition    0 5s ease-out              function setPlaceholder              var instance   this                   container   instance  container                   placeholder   instance  placeholder            placeholder setAttribute  class    levit-placeholder             placeholder style height    container offsetHeight    px           document body insertBefore  placeholder   container              function handleScroll              this  container style transform    translateZ 0  translateY      window scrollY    - 1      px               var smooth   new Smooth        smooth init           https   codepen io acauamontiel pen zxxebb editors 0010

[css] Pure CSS scroll animation

Examples related to css

Examples related to scroll

Examples related to css-transitions

Examples related to anchor