scroll-behavior

Wartość auto jest domyślną wartością właściwości scroll-behavior.

Domyślnie przewijanie do treści elementu HTML jest natychmiastowe.

  scroll-behavior:auto;

Podczas przenoszenia się do treści przykładowego elementu "div" przewijanie do treści przykładowego elementu "div" jest natychmiastowe.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        height:300px;
        overflow:auto;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      div > p {
        margin:0;
        min-height:300px;
      }

      div > :nth-child(1) {
        background-color:yellow;
      }

      div > :nth-child(2) {
        background-color:orange;
      }

      div > :nth-child(3) {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>
      <p id="fragment-tresci-1">Fragment Treści: 1</p>
      <p id="fragment-tresci-2">Fragment Treści: 2</p>
      <p id="fragment-tresci-3">Fragment Treści: 3</p>
    </div>

    <ol>
      <li>
        <a href="#fragment-tresci-1">przenieś mnie do fragmentu treści "fragment-tresci-1"</a>
      </li>

      <li>
        <a href="#fragment-tresci-2">przenieś mnie do fragmentu treści "fragment-tresci-2"</a>
      </li>

      <li>
        <a href="#fragment-tresci-3">przenieś mnie do fragmentu treści "fragment-tresci-3"</a>
      </li>
    </ol>

  </body>
</html>

Za pomocą wartości smooth właściwości scroll-behavior możemy sprawić, że przewijanie do treści interesującego nas elementu HTML będzie łagodne.

  scroll-behavior:none;

Podczas przenoszenia się do treści przykładowego elementu "div" przewijanie do treści przykładowego elementu "div" jest łagodne, ponieważ do wspomnianego elementu "div" została dodana właściwość "scroll-behavior" wraz z wartością "smooth".

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        scroll-behavior:smooth;
        height:300px;
        overflow:auto;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      div > p {
        margin:0;
        min-height:300px;
      }

      div > :nth-child(1) {
        background-color:yellow;
      }

      div > :nth-child(2) {
        background-color:orange;
      }

      div > :nth-child(3) {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>
      <p id="fragment-tresci-a">Fragment Treści: A</p>
      <p id="fragment-tresci-b">Fragment Treści: B</p>
      <p id="fragment-tresci-c">Fragment Treści: C</p>
    </div>

    <ol>
      <li>
        <a href="#fragment-tresci-a">przenieś mnie do fragmentu treści "fragment-tresci-a"</a>
      </li>

      <li>
        <a href="#fragment-tresci-b">przenieś mnie do fragmentu treści "fragment-tresci-b"</a>
      </li>

      <li>
        <a href="#fragment-tresci-c">przenieś mnie do fragmentu treści "fragment-tresci-c"</a>
      </li>
    </ol>

  </body>
</html>