Pure CSS scroll animation

Szukałem sposobu na przewinięcie w dół po kliknięciu przycisku, który znajduje się na górze strony, używając tylko CSS3.

Więc znalazłem ten tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

Ale jest to trochę zbyt zaawansowane dla moich potrzeb, ponieważ chcę tylko, aby przeglądarka przewijała w dół po kliknięciu na jeden przycisk znajduje się na górze strony, więc zastanawiałem się: czy można zrobić te zwoje CSS bez przycisków wprowadzania, tylko z tagiem kotwicy?

HTML wygląda tak: <a href="#" class="button">Learn more</a>

Mam już jakiś CSS, który muszę uruchomić po kliknięciu przycisku: 

/* 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;
    }
}
Author: leonheess, 2013-07-13
Source

4 answers

Możesz to zrobić za pomocą tagów anchor używając pseudo-selektora css3 :target, ten selektor zostanie uruchomiony, gdy element o tym samym id co hash bieżącego adresu URL zostanie dopasowany. przykład

Wiedząc o tym, możemy połączyć tę technikę z wykorzystaniem selektorów zbliżeniowych, takich jak " + "i"~", aby wybrać dowolny inny element poprzez element docelowy, który id dopasuje się do hasha bieżącego adresu url. Przykładem tego może być coś w rodzaju tego, czym jesteś pytanie .

 89
Author: Jesus Bejarano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-13 01:06:57

Użyj linków kotwiących i właściwości scroll-behavior ( MDN reference) dla kontenera przewijania: 

scroll-behavior: smooth;

Obsługa przeglądarek : Firefox 36+, Chrome 61 + (dlatego również Edge 79+) i Opera 48+.

Intenet Explorer, non-Chromium Edge i (do tej pory) Safari nie obsługują i po prostu "przeskakują" do celu łącza.

Przykładowe użycie: 

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

Oto Skrzypce .

A tu jeszcze Skrzypce zarówno poziome jak i przewijanie pionowe.

 117
Author: Felix Edelmann,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-02 13:04:19

Możesz użyć mojego skryptu z CodePen, po prostu owijając całą zawartość w.levit-pojemnik 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

 -2
Author: Acauã Montiel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-05 16:57:13

A dla przeglądarek obsługujących webkit miałem dobre wyniki z: 

.myElement {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // Added in from answer from Felix
    overflow-x: scroll;
}

To sprawia, że przewijanie zachowuje się znacznie bardziej jak standardowe zachowanie przeglądarki-przynajmniej działa dobrze na iPhonie, na którym testowaliśmy!

Hope that helps,

Ed

 -3
Author: Ed Hasting-Evans,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-21 13:01:54