检查使用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/