CSS:纯CSS滚动动画

时间:2013-07-13 15:07:02

标签: css3 scroll anchor transition

我一直在寻找一种在使用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;
    }
}

4 个答案:

答案 0 :(得分:97)

好吧,如果你不介意supporting not all major browsers(只有Firefox 36 +,Chrome 61+和Opera 48+),请使用锚链接和滚动容器的这个属性:

scroll-behavior: smooth;

请参阅MDN reference

像这样使用:

<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>

这里是Fiddle

此处还有一个Fiddle,包括水平和垂直滚动。

答案 1 :(得分:84)

您可以使用css3 :target伪选择器使用锚标记来执行此操作,当与当前URL的哈希具有相同ID的元素获得匹配时,将触发此选择器。 Example

知道这一点,我们可以将这种技术与使用邻近选择器(如“+”和“〜”)结合起来,通过目标元素选择任何其他元素,这些元素的id与当前url的哈希匹配。这方面的一个例子就像you are asking

答案 2 :(得分:-1)

您可以通过将所有内容包装在.levit-container DIV中来使用CodePen中的脚本。

~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

答案 3 :(得分:-3)

对于支持webkit的浏览器,我得到了很好的结果:

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

这使得滚动表现得更像标准的浏览器行为 - 至少它在我们测试的iPhone上运行良好!

希望有所帮助,