Добавление кнопки «Вернуться к началу» на ваш сайт Squarespace — это отличный способ улучшить пользовательский опыт ваших посетителей. Существует несколько различных способов добавления этой кнопки, и мы расскажем вам о каждом из них.
Способ 1: Используйте плагин
Существует несколько различных плагинов, которые вы можете использовать для добавления кнопки «Назад к началу» на ваш сайт Squarespace. Одним из наших любимых является плагин «Scroll Back to Top» из каталога плагинов WordPress.
Этот плагин бесплатен и прост в использовании. После установки и активации плагина в правом верхнем углу вашего сайта появится новая кнопка «Scroll Back to Top».
Способ 2: Добавить пользовательский CSS
Если вам удобно работать с кодом, вы также можете добавить кнопку возврата к началу страницы, добавив некоторые пользовательские CSS на свой сайт Squarespace. Сначала вам нужно будет создать новый блок кода и добавить следующий CSS:
back-to-top {
положение: фиксированное;
bottom: 20px;
справа: 20px;
display: none;
}
back-to-top i {
font-size: 36px;
color: #fff;
padding: 10px;
border-radius: 50%;
фон: #000;
}
Далее вам нужно добавить следующий код в область вставки кода нижнего колонтитула:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(«#back-to-top»).fadeIn();
} else {
$(«#back-to-top»). fadeOut();
}
});
$(«#back-to-top»).click(function(){
$(«html, body»).animate({ scrollTop: 0 }, 600);
return false;
});
Этот код создаст новый тег якоря с идентификатором «back-to-top». Тег якоря будет размещен в правом нижнем углу вашего сайта.
При нажатии на этот тег якоря страница будет прокручиваться назад к вершине. Конечный результат будет выглядеть примерно так:
Метод 3: Использование встроенных функций Squarespace
Если вы используете Squarespace 7.1 или выше, вы можете воспользоваться встроенной функцией Squarespace «Scroll To Top». Чтобы включить эту функцию, перейдите в раздел Дизайн > Пользовательский CSS и добавьте следующий фрагмент кода:*/body { -webkit-overflow-scrolling: touch;}/*После сохранения изменений в правом нижнем углу вашего сайта появится новая кнопка «Scroll To Top»*/.