> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Додавання кнопки прокрутки вгору сторінки Кнопка прокрутки вгору (Scroll to Top button) — популярний елемент на сайтах, які мають більше 3 блоків. Вона дозволяє відвідувачам вашого сайту швидко і легко переміщуватися ним. Ось як буде виглядати кнопка з нашою стилізацією: ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1065_1x1cpkt.png) ||| ${color}[#f97700](Важливо:) ця опція доступна лише для сайтів із платними підписками. # Додавання кнопки прокрутки вгору 1. Спершу відкрийте **Налаштування** сайту та перейдіть у вкладку **Сторонній код**: ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-138_1mcm477.png) 2. Вставте наступну частину коду в розділ **Before **. ```

``` ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-139_3zr6ji.png) 3. Далі вам потрібно додати скрипти для ініціалізації та роботи кнопки. Для цього вставте нижченаведений скрипт **перед** попереднім у розділі **Before **: ``` ``` ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-140_hset2s.png) 4. Тепер додайте другу частину у розділ ****: ``` ``` ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-141_efte7f.png) 5. Аби завершити інтеграцію, стилізуйте свою кнопку стилями CSS. Ви можете стилізувати кнопку як завгодно, але найпростіший спосіб — скористатися нашим фрагментом коду. Скопіюйте код і вставте його у вкладку **CSS**: ``` #myBtn { width: 40px; line-height: 40px; overflow: hidden; z-index: 999; cursor: pointer; opacity:0; transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; position: fixed; bottom: 50px; right: 0; background-color: #ededed; color: #5FC7AE; text-align: center; font-size: 40px; font-weight:bold; text-decoration: none; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); } #myBtn:hover { background-color: #5FC7AE; color: #fff; } ``` ![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image-142_10qytoo.png) | ${color}[#1aa900](Підказка:) ви можете змінити колір кнопки, замінивши кольоровий код #5FC7AE на інший. 6. Натисніть кнопку **Зберегти** та [опублікуйте свій сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб застосувати зміни. | ${color}[#1aa900](Підказка:) якщо вам потрібна допомога з додаванням або налаштуванням кнопки прокрутки вгору, у вас є можливість придбати послугу «Вебмайстер-години» у нашої Weblium Studio. Для цього напишіть нам у чат або на support@weblium.com.