问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

纯 CSS 滚动动画

社区维基
1
新手上路，请多包涵

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

原文由 blameless75 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssscrollcss-transitionsanchor
阅读 495
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

原文由 Jesus Bejarano 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
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>

这是一个 小提琴。

这里还有一个水平和垂直滚动的 小提琴。

原文由 Felix Edelmann 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题