Появляющаяся кнопка «Наверх» с помощью CSS

Появляющаяся кнопка «Наверх» с помощью CSS

Чтобы сделать появляющуюся кнопку «Наверх» с помощью CSS, воспользуемся свойством z-index — спрячем кнопку за неподвижной областью, размером немного большим самой кнопки, фон которой будет таким же, как и фон сайта.

Контейнер-кнопка «button»

  1. Создаём контейнер с кнопкой:
    <a href="#" class="button"></a>
  2. Пишем для него стили:
    .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»

Контейнер-крышка будет закрывать кнопку, если страница помещается в окно браузера и скроллинга нет.

  1. HTML:
    <div class="cap"></div>
  2. 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-ой уровень, то есть выше блока с кнопкой.

Пример