我一直在寻找一种方法,当点击位于页面顶部的按钮时,只使用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;
    }
}

推荐答案

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

了解了这一点,我们可以将此技术与使用"+"和"~"等邻近 Select 符相结合,以通过与当前url的散列相匹配的目标元素来 Select 任何其他元素.这方面的一个例子大概是you are asking.

Css相关问答推荐

如何以Angular 将下拉面板的宽度与其文本框对齐

Nuxt 3+sass:不能将包含路径与@IMPORT和@USE一起使用

Django:Tailwind 样式不适用于具有小部件属性的模板变量

CSS:使用 Material Icon 作为 ::marker 或 ::before 使 li 元素不起作用

React Tabs 在 Tabs 之间垂直渲染标签内容

有人可以解释为什么我的 CSS 转换如此突然吗?

如何为 React Native switch 组件创建标签?

当前的 html 标签没有发生两列布局

父母是内联块,子元素有%填充=奇怪的行为

循环一个 sass/scss 变量以生成 css 变量

CSS动画恢复默认

您如何设置 Google Places Autocomplete API 的下拉菜单样式?

使用 CSS 剪辑/裁剪背景图像

CSS nth-child 表示大于和小于

在 RC.1 中,某些样式无法使用绑定语法添加

ID 在整个页面中必须是唯一的吗?

Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

完成后如何防止css3动画重置?

Rails 中正确的 SCSS assets资源 struct

输入上方带有标签的样式表