纯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;
    }
}

使用锚链接和滚动容器的scroll-behavior属性（MDN引用）：

scroll-behavior: smooth;

浏览器支持：Firefox 36+、Chrome 61+（因此也支持Edge 79+）、Safari 15.4+、Opera 48+。

Intenet Explorer、非Chromium Edge和Safari的旧版本（仍被一些用户使用）不支持scroll-behavior；跳跃"；到链路目标（优雅的降级）。

示例用法：

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

您可以使用css3 :target伪选择器使用锚标记来完成此操作，当与当前URL的哈希具有相同id的元素匹配时，将触发此选择器。示例

知道了这一点，我们可以将这种技术与使用"+"one_answers"~"等邻近选择器相结合，通过目标元素选择任何其他元素，这些元素id与当前url的哈希匹配。这方面的一个例子就是你所问的问题。

您可以使用CodePen中的脚本，只需将所有内容包装在.levit容器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

对于支持webkit的浏览器，我使用取得了很好的效果

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

这使得滚动行为更像标准的浏览器行为——至少它在我们测试的iPhone上运行得很好！

希望能有所帮助，

相关内容

最新更新

热门标签：