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, которые мне нужно вызвать на кнопку click:

/* 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;
    }
}
4 64
css3 scroll css-transitions anchor

4 ответа:

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

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

81

Ну, если вы не возражаете поддержка не всех основных браузеров (только Firefox 36+, Chrome 61+ и Opera 48+), используйте якорные ссылки и это единственное свойство для прокрутки контейнера:

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

здесь Скрипка.

и вот еще Скрипка С горизонтальной и вертикальной прокруткой.

69

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

0

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

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

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

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

Ed

-2