Появляющаяся кнопка «Наверх» с помощью CSS
Чтобы сделать появляющуюся кнопку «Наверх» с помощью CSS, воспользуемся свойством z-index
— спрячем кнопку за неподвижной областью, размером немного большим самой кнопки, фон которой будет таким же, как и фон сайта.
Контейнер-кнопка «button»
-
Создаём контейнер с кнопкой:
<a href="#" class="button"></a>
-
Пишем для него стили:
.button { display: block; background: url(путь+к+изображению) center no-repeat; height: 32px; width: 32px; position: fixed; bottom: 10px; right: 10px; z-index: 1; }
- display: block;
- определяем, что отображать данную ссылку нужно как блок.
- background: url('путь+к+изображению') center no-repeat;
- делаем кнопку фоном блока, указывая браузеру, что его нужно поместить в центре и не повторять.
- height: 32px; width: 32px;
- высота и ширина блока соответственно (их берём исходя из размеров изображения кнопки).
- position: fixed; bottom: 10px; right: 10px;
- фиксируем блок и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
- z-index: 1;
- помещаем блок на 1-ый уровень.
Контейнер-крышка «cap»
Контейнер-крышка будет закрывать кнопку, если страница помещается в окно браузера и скроллинга нет.
-
HTML:
<div class="cap"></div>
-
CSS:
.cap { background-color: цвет+фона+сайта; height: 32px; width: 32px; position: absolute; bottom: 10px; right: 10px; z-index: 2; }
- background-color: цвет+фона+сайта;
- устанавливаем фон блока таким же, как и фон сайта.
- height: 32px; width: 32px;
- высота и ширина блока соответственно (их берём также исходя из размеров изображения кнопки или чуть больше).
- position: absolute; bottom: 10px; right: 10px;
- делаем блок не фиксированным как предыдущий, а абсолютно позиционированным и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
- z-index: 2;
- помещаем блок на 2-ой уровень, то есть выше блока с кнопкой.