Подтвердить что ты не робот

Проверка прокрутки с помощью CSS

Я пытаюсь создать чистую кнопку 100% CSS (без jQuery) "Вверх", но я бы хотел, чтобы кнопка отображалась только в том случае, если посетитель прокручивает страницу вниз.

Можно ли как-то проверить это с помощью CSS? Поэтому, если посетитель немного прокручивается, нажмите кнопку "Вверх".

Спасибо!

Ответ 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/