使用 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 与另一个元素的链接。在下面的示例中，我使用 body 的伪元素 ::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/