使用CSS检查滚动

Question

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

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

谢谢！

Answer 1

通过光标位置确定

一种执行此操作的方法是仅.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;
}