CSS：纯CSS滚动动画

2018-06-07 12:57:25

我一直在寻找一种向下滚动的方式，只需点击位于页面顶部的按钮即可。

所以我找到了这个教程：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;
    }
}

你可以使用css3 :target伪选择器来实现锚定标记，当与当前URL的散列值相同的元素获得匹配时，将触发此选择器。例

知道这一点，我们可以将这种技术与使用接近选择器（如“+”和“〜”）来通过目标元素选择任何其他元素，这些元素的id与当前url的哈希匹配。这个例子就像你在问什么。

那么，如果您不介意支持所有主流浏览器（仅适用于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>

这是一个小提琴。

这也是一个水平和垂直滚动的小提琴。

只需将所有内容包装在.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

链接地址: http://www.djcxy.com/p/23049.html

上一篇: CSS: pure CSS scroll animation

下一篇: Cross browser JavaScript (not jQuery...) scroll to top animation