> ## Content Index
> Fetch the complete content index at: https://blog.themarfa.name/llms.txt
> Use this file to discover other available public pages before exploring further.

# Хитрости Postach.io. Добавляем кнопку Вверх и Назад
- URL: https://blog.themarfa.name/khitrosti-postach-io-dobavliaem-knopku-vverkh-i-nazad/
- Published: 2014-07-20T18:40:37.000Z
- Updated: 2018-08-22T07:46:25.000Z
- Author: Константин Докучаев
- Tags: postachio

В этой статье я расскажу о том как добавить кнопку Вверх к вашему блогу. При нажатии на нее, посетитель автоматически перейдет к началу страницы. Многим эта функция покажется очень удобной.

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/3cd148c0-5399-4187-856f-392254a90038.png)

### HTML

В html код вашей темы [Postach.io](http://postach.io/ "Postach.io") нужно добавить следующий код:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/1fb845bb-fce2-474b-81d7-77dd6510981e.png)

###### 

Все эти HTML теги нужны для того чтобы максимально полностью задать нужный стиль для кнопки.

###### 

Сам код я рекомендую добавить перед футером темы. Его легко найти по слову footer:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/4c7fa385-773e-4ef2-a683-df4cc37d3c42.png)

###### 

Далее, нам нужно определить место, куда мы будем возвращать посетителя. Я рекомендую выбрать для этого самое начало статьи. В коде его легко найти по слову arcticle. Ко всем тегам

нужно добавить свойство `name="top"`:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/af0ff3fe-98cb-49f2-bd06-674c628af89b.png)

###### 

В качестве точки возврата так же идеально подойдет любой раздел блога, который всегда находится выше статьи.

### CSS

В .css вашей темы нужно задать несколько свойств для кнопки. Вот пример моего кода:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/e4f6e17a-c9d1-4122-ac94-5a77567ae084.png)

###### 

этот код указывает на то, что кнопка всегда перемещается вместе со скроллом страницы. Она находится на 10 px выше нижней границы экрана и на 80 px левее контента.

###### 

Остальные свойства задают сам внешний вид кнопки и текста в ней. Их вы можете настроить по своему вкусу.

`background:#ddd` \- сам цвет кнопки, `color:#bbb` \- цвет текста кнопки.

`#back-top a:hover span` \- задает поведение кнопки при наведении. У меня меняется ее цвет.

### Итог

Вот так всего одной строчкой в HTML коде можно сделать кнопку Вверх для вашего блога. Если вас интересуют какие-то тонкости ее настройки, особенно .css, спрашивайте в комментариях.

### Бонус. Кнопка Назад

Пользователь при нажатии на эту ссылку вернется на предыдущую страницу, с которой он пришел:

![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/ecf6e68e-8928-4517-9603-a63da8d11f7e.png)