使用CSS检查滚动 [英] Check scrolling with CSS

问题描述

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

I am trying to create a pure 100% CSS (no jQuery) "Back to Top" button but I would like the button to show only if the visitor scrolls down the page.

是否可以通过CSS进行检查?因此，如果访问者向下滚动一点，则显示返回顶部"按钮.

Is it possible to check that with CSS somehow? So if visitor scrolled down a bit show the "Back to Top" button.

谢谢！

推荐答案

通过光标位置确定

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

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

您可以在此处看到效果: http://jsfiddle.net/GFfbe/1/

You can see the effect here: http://jsfiddle.net/GFfbe/1/

或者，您可以慢慢地发现另一个元素的.toTop链接.在下面的示例中，我使用主体的伪元素::before掩盖了.toTop元素，并在用户滚动时慢慢显示它:

Alternatively, you could slowly uncover the .toTop link with another element. In the example below, I use the body's pseudo element ::before to cover up the .toTop element, and slowly reveal it as the user scrolls:

/* .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/

You can see this effect here: http://jsfiddle.net/GFfbe/2/

这篇关于使用CSS检查滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！