css - 使用CSS检查滚动

我试图创建一个纯100％CSS(无jQuery)“返回页首”按钮，但我希​​望该按钮仅在访客向下滚动页面时显示。

是否可以通过CSS进行检查？因此，如果访客向下滚动，请显示“返回顶部”按钮。

谢谢!

最佳答案

通过光标位置确定
一种执行此操作的方法是，仅当用户将鼠标悬停在页面本身的内容(位于标题和导航链接下方)上时，才显示.toTop元素:

.toTop { opacity: 0; }
.toTop:hover, main:hover + .toTop { opacity: 1; }

您可以在这里看到效果:http://jsfiddle.net/GFfbe/1/
或者，慢慢发现它
或者，您可以慢慢发现其他元素的.toTop链接。在下面的示例中，我使用主体的伪元素::before掩盖了.toTop元素，并在用户滚动时慢慢显示它:

/* .toTop will appear in the left margin */
body {
    margin: 0 10em;
}

/* Positioned and sized to overlap .toTop */
body::before {
    content: "";
    background: white;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 5em;
}

/* Positioned, so body::before goes behind it */
main {
    position: relative;
}

/* Attached to viewport at bottom left */
.toTop {
    z-index: -1;
    position: fixed;
    bottom: 1em; left: 1em;
}

您可以在这里看到此效果:http://jsfiddle.net/GFfbe/2/