Кнопки возврата к началу страницы — отличный способ помочь читателям ориентироваться на вашем сайте. Однако в Squarespace нет встроенной функции кнопки возврата к началу страницы. К счастью, есть несколько обходных путей, которые помогут вам добавить кнопку возврата к началу страницы на ваш сайт Squarespace.
Одним из обходных путей является использование плагина Page Scroll to Top Button. Этот плагин добавляет в нижнюю часть страницы кнопку, при нажатии на которую читатель возвращается в верхнюю часть страницы.
Другим обходным путем является использование HTML и CSS для создания собственной кнопки возврата к началу страницы. Этот метод требует немного больше кода, но он дает вам больше контроля над внешним видом кнопки.
Чтобы добавить кнопку возврата к началу страницы с помощью плагина Page Scroll to Top Button:
1. Перейдите на сайт Page Scroll to Top Button и нажмите кнопку Download. 2. Распакуйте загруженный файл и загрузите содержимое папки (ps2tob-master) на ваш сайт Squarespace. Чтобы получить помощь в загрузке файлов, ознакомьтесь с этим руководством. 3.
В главном меню нажмите кнопку Страницы, а затем нажмите значок + рядом со страницей, на которую вы хотите добавить кнопку. 4. В редакторе страниц щелкните Code Injection в левой боковой панели. 5. In the Header Code Injection field, enter the following code:
6. Click Save and then click Publish or Save & Close in the top-right corner of the Page Editor.
To add a back to top button using HTML and CSS:
1. In the Home Menu, click Pages and then click + icon next to the page you want to add the button to.
In the Page Editor, click Code Injection in the left sidebar. In the Header Code Injection field, enter the following code:
back-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 50px; height: 50px; text-align: center; line-height: 50px; background: #333; /* Change this background color */
color: #fff; /* Change this text color */
cursor: pointer; /* Add cursor on hover */
}
#back-to-top i { /* Change icon color on hover */
color:#fff !important;
}
4..In the Footer Code Injection field, enter or paste this code snippet:
// ===== Scroll To Top ==== $(window).scroll(function() { if ($(this).scrollTop() >= 50) { // Если страница прокручена более чем на 50px $(«#back-to-top»).fadeIn(200); // Fade in } else { $(«#back-to-top»).fadeOut(200); // Else fade out } }); $(«#back-to-top»).click(function() { $(«body,html»).animate({ scrollTop : 0 },500); });
5.Нажмите Сохранить, а затем нажмите Опубликовать или Сохранить и закрыть в разделе