Scrolling to an Anchor using Transition/CSS3

前端 未结 10 889
-上瘾入骨i
-上瘾入骨i 2020-11-30 20:07

I have a series of links which are using an anchor mechanism:


      
10条回答
  •  再見小時候
    2020-11-30 21:03

    Using the scroll-behavior CSS property:

    (which is supported in modern browsers but not Edge):

    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;    /* <----- THE SECRET ---- */
    }
    
    section div{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 8vw;
    }
    
    
     
    1
     
    2
     
    3

提交回复
热议问题