Scrolling to an Anchor using Transition CSS3

Question

I have a series of links which are using an anchor mechanism    lt div class  header  gt       lt p class  menu  gt  lt a href   S1  gt Section1 lt  a gt  lt  p gt       lt p class  menu  gt  lt a href   S2  gt Section2 lt  a gt  lt  p gt           lt  div gt   lt div style  width  100    gt   lt a name  S1  class  test  gt  amp nbsp  lt  a gt   lt div class  curtain  gt  Lots of text  lt  div gt    lt a name  S2  class  test  gt  amp nbsp  lt  a gt   lt div class  curtain  gt  lots of text  lt  div gt       lt  div gt    I am using the following CSS    test       position relative       margin  0       padding  0       float  left      display  inline-block      margin-top  -100px     whatever offset this needs to be        It s working fine  But of course  it s jumping from one section to the next when we click on the link  So I d like to have a smooth transition  using a scroll of some sort to the start of selected section   I think I read on Stackoverflow that this is not possible  yet  with CSS3 but I d like a confirmation and also I d like to know what  could  be the solution  I am happy to use JS but I can t use jQuery  I tried to use an on click function on the link  retrieve the  vertical position  of the div that needs to be displayed but I was unsuccessful   I am still learning JS and don t know it well enough to come up with a solution of my own   Any help ideas would be greatly appreciated

User · Answer

I guess it might be possible to set some kind of hardcore transition to the top style of a #container div to move your entire page in the desired direction when clicking your anchor. Something like adding a class that has top:-2000px.

I did use JQuery because I'm to lazy too use native JS, but it is not necessary for what I did.

This is probably not the best possible solution because the top content just moves towards the top and you can't get it back easily, you should definitely use JQuery if you really need that scroll animation.

DEMO

User · Answer

You can find the answer to your question on the following page   https   stackoverflow com a 17633941 2359161  Here is the JSFiddle that was given   http   jsfiddle net YYPKM 3   Note the scrolling section at the end of the CSS  specifically    x000D   x000D     x000D    Styling x000D      x000D   x000D  html body   x000D      width  100   x000D      height  100   x000D      position  relative   x000D    x000D  body   x000D  overflow  hidden  x000D    x000D   x000D  header   x000D  background   fff   x000D  position  fixed   x000D  left  0  top  0   x000D  width 100   x000D  height  3 5rem  x000D  z-index  10   x000D    x000D   x000D  nav   x000D  width  100   x000D  padding-top  0 5rem  x000D    x000D   x000D  nav ul   x000D  list-style  none  x000D  width  inherit   x000D  margin  0   x000D    x000D   x000D   x000D  ul li nth-child  3n   1    main  panel nth-child  3n   1    x000D  background  rgb  0  180  255    x000D    x000D   x000D  ul li nth-child  3n   2    main  panel nth-child  3n   2    x000D  background  rgb  255  65  180    x000D    x000D   x000D  ul li nth-child  3n   3    main  panel nth-child  3n   3    x000D  background  rgb  0  255  180    x000D    x000D   x000D  ul li   x000D  display  inline-block   x000D  margin  0 8px  x000D  margin  0 0 5rem  x000D  padding  5px 8px  x000D  padding  0 3rem 0 5rem  x000D  border-radius  2px   x000D  line-height  1 5  x000D    x000D   x000D  ul li a   x000D  color   fff  x000D  text-decoration  none  x000D    x000D   x000D   panel   x000D  width  100   x000D  height  500px  x000D  z-index 0   x000D  -webkit-transform  translateZ  0    x000D  transform  translateZ  0    x000D  -webkit-transition  -webkit-transform 0 6s ease-in-out  x000D  transition  transform 0 6s ease-in-out  x000D  -webkit-backface-visibility  hidden  x000D  backface-visibility  hidden  x000D   x000D    x000D   x000D   panel h1   x000D  font-family  sans-serif  x000D  font-size  64px  x000D  font-size  4rem  x000D  color   fff  x000D  position relative  x000D  line-height  200px  x000D  top  33   x000D  text-align  center  x000D  margin  0  x000D    x000D   x000D     x000D    Scrolling x000D      x000D   x000D  a  id   servicios    target    main article panel   x000D  -webkit-transform  translateY  0px   x000D  transform  translateY  0px    x000D    x000D   x000D  a  id   galeria    target    main article panel   x000D  -webkit-transform  translateY  -500px    x000D  transform  translateY  -500px    x000D    x000D  a  id   contacto    target    main article panel   x000D  -webkit-transform  translateY  -1000px    x000D  transform  translateY  -1000px    x000D    x000D   lt a id  servicios  gt  lt  a gt  x000D   lt a id  galeria  gt  lt  a gt  x000D   lt a id  contacto  gt  lt  a gt  x000D   lt header class  nav  gt  x000D   lt nav gt  x000D       lt ul gt  x000D           lt li gt  lt a href   servicios  gt  Servicios  lt  a gt   lt  li gt  x000D           lt li gt  lt a href   galeria  gt  Galeria  lt  a gt   lt  li gt  x000D           lt li gt  lt a href   contacto  gt Contacta  nos  lt  a gt   lt  li gt  x000D       lt  ul gt  x000D   lt  nav gt  x000D   lt  header gt  x000D   x000D   lt section id  main  gt  x000D   lt article class  panel  id  servicios  gt  x000D       lt h1 gt  Nuestros Servicios lt  h1 gt  x000D   lt  article gt  x000D   x000D   lt article class  panel  id  galeria  gt  x000D       lt h1 gt  Mustra de nuestro trabajos lt  h1 gt  x000D   lt  article gt  x000D   x000D   lt article class  panel  id  contacto  gt  x000D       lt h1 gt  Pongamonos en contacto lt  h1 gt  x000D   lt  article gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

If anybody is just like me willing to use jQuery  but still found himself looking to this question then this may help you guys   https   html-online com articles animated-scroll-anchorid-function-jquery    x000D   x000D    document  ready function      x000D                 a scrollLink   click function  event    x000D                  event preventDefault    x000D                     html  body   animate   scrollTop      this  attr  href    offset   top    500   x000D                  x000D              x000D   lt a href   anchor1  class  scrollLink  gt Scroll to anchor 1 lt  a gt  x000D   lt a href   anchor2  class  scrollLink  gt Scroll to anchor 2 lt  a gt  x000D   lt p id  anchor1  gt  lt strong gt Anchor 1 lt  strong gt  - Lorem ipsum dolor sit amet  nonumes voluptatum mel ea  lt  p gt  x000D   lt p id  anchor2  gt  lt strong gt Anchor 2 lt  strong gt  - Ex ignota epicurei quo  his ex doctus delenit fabellas  lt  p gt  x000D   x000D   x000D

User · Answer

While some of the answers were very useful and informative  I thought I would write down the answer I came up with  The answer from Alex was very good  it is however limited in the sense that the height of the div needs to be hard coded in the CSS   So the solution I came up with uses JS  no jQuery  and is actually a stripped down version  almost to the minimum  of over solutions to solve similar problems I found on Statckoverflow   HTML   lt div class  header  gt       lt p class  menu  gt  lt a href   S1  onclick  test  S1    return false   gt S1 lt  a gt  lt  p gt       lt p class  menu  gt  lt a href   S2  onclick  test  S2    return false   gt S2 lt  a gt  lt  p gt       lt p class  menu  gt  lt a href   S3  onclick  test  S3    return false   gt S3 lt  a gt  lt  p gt       lt p class  menu  gt  lt a href   S4  onclick  test  S4    return false   gt S3 lt  a gt  lt  p gt   lt  div gt   lt div style  width  100    gt       lt div id  S1  class  curtain  gt      blabla      lt  div gt       lt div id  S2  class  curtain  gt      blabla      lt  div gt       lt div id  S3  class  curtain  gt      blabla      lt  div gt       lt div id  S4  class  curtain  gt      blabla      lt  div gt    lt  div gt    NOTE THE  RETURN FALSE   in the on click call  This is important if you want to avoid having your browser jumping to the link itself  and let the effect being managed by your JS    JS code    lt script gt  function scrollTo to  duration        if  document body scrollTop    to  return      var diff   to - document body scrollTop      var scrollStep   Math PI    duration   10       var count   0  currPos      start   element scrollTop      scrollInterval   setInterval function            if  document body scrollTop    to                count   count   1              currPos   start   diff    0 5 - 0 5   Math cos count   scrollStep                document body scrollTop   currPos                    else   clearInterval scrollInterval           10      function test elID        var dest   document getElementById elID       scrollTo dest offsetTop  500      lt  script gt    It s incredibly simple  It finds the vertical position of the div in the document using its unique ID  in the function test   Then it calls the scrollTo function passing the starting position  document body scrollTop  and the destination position  dest offsetTop   It performs the transition using some sort of ease-inout curve   Thanks everyone for your help   Knowing a bit of coding can help you avoiding  sometimes heavy  libraries  and giving you  the programmer  more control

User · Answer

Just apply scroll behaviour to all elements with this one-line code   x000D   x000D     scroll-behavior  smooth  important    x000D   x000D   x000D

User · Answer

Using the scroll-behavior CSS property   which is supported in modern browsers but not Edge    x000D   x000D  a     display  inline-block    padding  5px 7     text-decoration  none     nav  section     display  block    margin  0 auto    text-align  center     nav     width  350px    padding  5px     section     width  350px    height  130px    overflow-y  scroll    border  1px solid black    font-size  0     scroll-behavior  smooth         lt ----- THE SECRET ----       section div    display  flex    align-items  center    justify-content  center    height  100     font-size  8vw    x000D   lt nav gt      lt a href   page-1  gt 1 lt  a gt      lt a href   page-2  gt 2 lt  a gt      lt a href   page-3  gt 3 lt  a gt   lt  nav gt   lt section gt      lt div id  page-1  gt 1 lt  div gt      lt div id  page-2  gt 2 lt  div gt      lt div id  page-3  gt 3 lt  div gt   lt  section gt  x000D   x000D   x000D

User · Answer

Only mozilla implements a simple property in css    http   caniuse com  search scroll-behavior  you will have to use JS at least   I personally use this because its easy to use  I use JQ but you can adapt it I guess      Scroll transition to anchor      a toscroll   on  click  function e        var url   e target href      var hash   url substring url indexOf      1          html  body   animate           scrollTop        hash  offset   top        500       return false        just add class toscroll to your a tag

User · Answer

I implemented the answer suggested by  user18490 but ran into two problems     First bouncing when user clicks on several tabs links multiple times in short succession Second  the undefined error mentioned by  krivar     I developed the following class to get around the mentioned problems  and it works fine   export class SScroll      constructor            this delay 501        ms         this duration 500     ms         this lastClick 0            lastClick     delay     duration      scrollTo  destID   gt              To prevent  bounce                https   stackoverflow com a 28610565 3405291            if this lastClick gt   Date now  -this delay   return          this lastClick Date now            const dest document getElementById destID          const to dest offsetTop         if document body scrollTop  to  return          const diff to-document body scrollTop         const scrollStep Math PI    this duration 10          let count 0         let currPos         const start window pageYOffset         const scrollInterval setInterval     gt               if document body scrollTop  to                   count                   currPos start diff   5- 5 Math cos count scrollStep                   document body scrollTop currPos              else clearInterval scrollInterval             10              UPDATE  There is a problem with Firefox as mentioned here  Therefore  to make it work on Firefox  I implemented the following code  It works fine on Chromium-based browsers and also Firefox   export class SScroll      constructor            this delay 501        ms         this duration 500     ms         this lastClick 0           lastClick     delay     duration     scrollTo  destID   gt              To prevent  bounce                https   stackoverflow com a 28610565 3405291            if this lastClick gt   Date now  -this delay   return           this lastClick Date now           const dest document getElementById destID          const to dest offsetTop         if  document body scrollTop    document documentElement scrollTop    0   to  return           const diff to- document body scrollTop    document documentElement scrollTop    0          const scrollStep Math PI    this duration 10          let count 0         let currPos         const start window pageYOffset         const scrollInterval setInterval     gt               if  document body scrollTop    document documentElement scrollTop    0   to                   count                   currPos start diff   5- 5 Math cos count scrollStep                      https   stackoverflow com q 28633221 3405291                       To support both Chromium-based and Firefox                    document body scrollTop currPos                 document documentElement scrollTop currPos              else clearInterval scrollInterval             10

User · Answer

Here is a pure css solution using viewport units and variables that automatically scales to the device  and works on window resize   I added the following to Alex s solution           html body               width  100               height  100               position  fixed    prevents scrolling                --innerheight  100vh    variable 100  of viewport height                       body               overflow  hidden     prevents scrolling                        panel               width  100               height  var --innerheight      viewport height             a  id   galeria    target    main article panel               -webkit-transform  translateY  calc -1 var --innerheight                  transform  translateY  calc -1 var --innerheight                         a  id   contacto    target    main article panel               -webkit-transform  translateY  calc -2 var --innerheight                  transform  translateY  calc -2 var --innerheight

User · Answer

I tried user18490 solution but there were some problems like   Bouncing when clicked more than once Bouncing if there isn t sufficient space below the target elements Element is not defined Problem of parent Element e t c  Well after I edited and researched  I was able to come up with a solution  Hopefully it ll work for everyone Just change the script tag to  var html   document documentElement  var body   document body  var documentHeight   Math max body scrollHeight  body offsetHeight  html scrollHeight  html clientHeight  html offsetHeight   var PageHeight   Math max html clientHeight    0  window innerHeight    0   function scrollDownTo to  duration        if  document body scrollTop    to  return      if   documentHeight-to   lt  PageHeight            to   documentHeight - PageHeight            var diff   to - window pageYOffset      var scrollStep   Math PI    duration   10       var count   0  currPos  ajaxe   1     var start   window pageYOffset      var scrollInterval   setInterval function            if  window pageYOffset    to                count   count   1              if  ajaxe  gt  count                    clearInterval scrollInterval                            currPos   start    diff    0 5 - 0 5   Math cos count   scrollStep                scroll  0  currPos              ajaxe   count                   else   clearInterval scrollInterval          20          function test  elID        var dest   document getElementById elID       scrollDownTo  dest getBoundingClientRect   top   window pageYOffset   500      The HTML is still the same   lt div class  quot header quot  gt       lt p class  quot menu quot  gt  lt a href  quot  S1 quot  onclick  quot test  S1    return false  quot  gt S1 lt  a gt  lt  p gt       lt p class  quot menu quot  gt  lt a href  quot  S2 quot  onclick  quot test  S2    return false  quot  gt S2 lt  a gt  lt  p gt       lt p class  quot menu quot  gt  lt a href  quot  S3 quot  onclick  quot test  S3    return false  quot  gt S3 lt  a gt  lt  p gt       lt p class  quot menu quot  gt  lt a href  quot  S4 quot  onclick  quot test  S4    return false  quot  gt S3 lt  a gt  lt  p gt   lt  div gt   lt div style  quot width  100   quot  gt       lt div id  quot S1 quot  class  quot curtain quot  gt      blabla      lt  div gt       lt div id  quot S2 quot  class  quot curtain quot  gt      blabla      lt  div gt       lt div id  quot S3 quot  class  quot curtain quot  gt      blabla      lt  div gt       lt div id  quot S4 quot  class  quot curtain quot  gt      blabla      lt  div gt    lt  div gt   If you still encounter any issues kindly comment

[html] Scrolling to an Anchor using Transition/CSS3

Examples related to html

Examples related to css