CSS:纯CSS滚动动画

Question

CSS:纯CSS滚动动画

bla*_*s75 75 anchor scroll transition css3

我一直在寻找一种方法来向下滚动时单击位于页面顶部的按钮仅使用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;
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fel*_*ann 105

好吧,如果你不介意支持不是所有主流浏览器(只有Firefox 36 +,Chrome 61+和Opera 48+),请使用锚链接和滚动容器的这个单一属性:

scroll-behavior: smooth;

Run Code Online (Sandbox Code Playgroud)

请参阅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>

Run Code Online (Sandbox Code Playgroud)

这是一个小提琴.

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

为什么要downvote？你能解释一下我如何改进我的答案或为什么我的解决方案不好？ (9认同)
你被低估了,因为在http://caniuse.com/#search=scroll-behavior它说它只适用于firefox.因此,它对于生产级别的站点来说基本上是没有价值的,因为它只能在一个甚至不是最常用的浏览器中工作.除非您的网站上的流量主要是firefox. (3认同)
耶稣的解决方案非常好,但我添加了Felix的答案,因为它适用于Chrome v62,Firefox v57并且正在Edge中考虑(Safari尚未支持),我们希望给浏览器制造商带来压力.所以这就是我给我的学生作为这些浏览器的一个简单示例,也有平滑滚动的"顶部"链接:https://daveeveritt.github.io/css-smooth-scroll/这里的repo有更多的信息和链接在自述文件中:https://github.com/DaveEveritt/css-smooth-scroll (2认同)

Answer 2

Jes*_*ano 86

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

知道了这一点,我们可以将这种技术与使用邻近选择器(如"+"和"〜")相结合,通过目标元素选择任何其他元素,这些元素的id与当前url的哈希匹配.这方面的一个例子就像你问的那样.

对于其他想要看到这个动画所需的最低限度的人,我拿出了格式化等,以便更容易找出http://jsfiddle.net/YYPKM/347/的内容 (17认同)
您可以使用目标技术来定位布局中的任何元素,甚至是页面本身选择"<body>"标记:). (5认同)
我认为这里不可能灵活,对吗？变换需要一个真正的价值,不能针对另一个元素,对吧？ (3认同)
比如说,为什么我们在后面的演示中需要`backface-visibility`？我们没有翻过任何东西...... (2认同)
@LouisMaddox添加`header {位置：固定；左：0；最高：0; z索引：10；}`在提琴的CSS中将确保链接始终可单击，因为现在单击2号将使1号不可单击。 (2认同)

归档时间：	12 年，4 月前
查看次数：	209309 次
最近记录：	7 年，9 月前