CSS: чистая анимация прокрутки CSS

Я искал способ прокрутки вниз при нажатии на кнопку, расположенную поверх страницы, используя только CSS3.

Итак, я нашел этот учебник: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

Демо: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

Но это слишком продвинуто для моих нужд, так как я просто хочу, чтобы браузер прокручивался вниз одним щелчком мыши на одной из кнопок, расположенной вверху страницы, поэтому мне было интересно: возможно ли эти прокрутки CSS без ввода кнопок, только с привязным тегом?

HTML выглядит так: <a href="#" class="button">Learn more</a>

У меня уже есть CSS, который мне нужно вызвать при нажатии кнопки:

/* 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;
    }
}

Ответ 1

Вы можете сделать это с помощью меток привязки с использованием псевдоселектора css3 :target, этот селектор будет запущен, когда элемент с тем же идентификатором, что и хэш текущего URL, получит совпадение. Пример

Зная это, мы можем объединить эту технику с помощью селекторов близости, таких как "+" и "~", чтобы выбрать любой другой элемент через целевой элемент, который имеет совпадение с хешем текущего URL-адреса. Примером этого может быть что-то вроде которое вы задаете.

Ответ 2

Хорошо, если у вас нет проблем с плохой поддержкой браузера (только Firefox до сих пор), используйте ссылки привязки и это единственное свойство:

scroll-behavior: smooth;

Смотрите ссылку MDN.

Итак, используйте его вот так:

<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 foo.</div>
  <a href="#body">Back to top</a>
</body>

Здесь Fiddle.

И здесь также Fiddle с горизонтальной и вертикальной прокруткой.

Ответ 3

Вы можете использовать мой script из CodePen, просто обернув все содержимое в .IVit-контейнере 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

Ответ 4

И для браузеров с поддержкой webkit у меня были хорошие результаты:

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

Это делает прокрутку более похожим на стандартное поведение браузера - по крайней мере, это хорошо работает на iPhone, на котором мы тестировали!

Надеюсь, что это поможет,