Решил повесить кнопку вверху после заголовка на форму, которую нужно заполнить внизу после контента. Поставил обычный якорь, а сначала вообще взял якорную ссылку из содержания и поставил при клике на кнопку типа так:
Оно в общем то работает, но крипово. Вообще не юзер-френдли. Не понятно для пользователя, что происходит после клика. Вроде никуда не переходил, а тут какая то форма появилась. В сети есть замороченных инструкций с решениями плавной прокрутки при клике по ссылке к якорю через javascript. Я их перепробовал пару штук, у меня не сработало. Инструкции были лохматых годов, кстати. По итогу у меня нормально отработал метод получения плавной прокрутки к якорю после клика на ссылку через CSS.
Инструкция
Добавляем CSS код в любое место вашего файла style.css или в специальное поле вашего шаблона. В это теме JournalX от WPShop это есть прямо в настройках, выглядит так:
Собственно сам css код для включения плавной прокрутки при клике по якорной ссылке. Не забудьте добавить в код html, а то плавная прокрутка не будет работать.
html {
scroll-behavior: smooth; /* плавная прокрутка с кнопки */
}
Новый стиль добавили на сайт, теперь нужно поставить якорь и ссылку на него. Для начала код якоря, т.е. это место куда приведет пользователя плавный скролл. Ставится обычно перед заголовком или формой.
<span id="yakor1"> </span>
В span можно заключить любой текст, но пробел, по-моему идеально над нужным элементом. Теперь ставим ссылку, или в нашем случае кнопку, при клике на которую, юзера плавно отправит к якорю. Кнопки, кстати тоже встроены в редактор шаблона, что удобно.
Аналогично ставится якорная ссылка, другими словами ссылка к якорю в контенте:
На сегодня всё. Делитесь инструкцией, тыкайте звёзды, подписывайтесь на меня.
