1

Как сделать, чтобы вот такая scroll to кнопка приводила не к координатам, а к конкретному диву что-ли?

В общем нужно чтобы на любом экране она прокручивала до формы обратной связи

$(function() {
   $('.button').click(function() {
       $('body,html').animate({scrollTop:1000},800);
    });
 });

Дополнение: HTML код формы

<form id="send-form">
    <div class="form-group" style="text-align:left">
        <label for="input-name">name</label>
        <input type="name" class="form-control" id="input-name" placeholder="HOME COMPLETO" data-toggle="tooltip" title="" required>
        <small id="nameHelp" class="form-text text-muted">gfdgdf</small>
    </div>
    <div class="form-group" style="text-align:left">
        <label for="input-phone">phone:</label>
        <input type="phone" class="form-control" id="input-phone" value="+39" data-toggle="tooltip" title="+39 XXX XXX XX XX" required>
        <small id="phoneHelp" class="form-text text-muted">hgfhf</small>
    </div>
</form>
2

2 ответа 2

4
$(function() {
   $('.button').click(function() {
       $.scrollTo("#formId", 800);
    });
 });

#formId - селектор вашей формы обратной связи

UPD: не опознал что scrollTo работает через плагин https://github.com/flesler/jquery.scrollTo, вот в чистом jquery:

$(function() {
   $('.button').click(function() {
     $('html, body').animate({
        scrollTop: $("#formId").offset().top
     }, 800);
   })
})
3
  • Почему-то не работает :( Селектор к <form> добавил, в функцию вписал. Нажимаю - ничего не происходит 16 июл 2019 в 19:16
  • @КириллМиронов добавьте в вопрос ещё html с формой, дело может быть в селекторе 16 июл 2019 в 19:17
  • 1
    @КириллМиронов прошу прощения, не опознал, что с плагином отправил) Обновленный вариант должен работать 16 июл 2019 в 19:22
1
let coordY = document.querySelector(sel).getBoundingClientRect().y;
window.scrollBy(0, coordY);

так ты получишь точные координаты до нужного элемента в любой части страницы. А плавный скролл можно имитировать добавляя по 10/20 от текущей прокрутки к нужному элементу через setInterval.

либо:

    let coordY = document.querySelector(sel).getBoundingClientRect().y;
window.scrollBy({
    top: coordY,
    left: 0,
    behavior: 'smooth'
  });

но по поддержке смотри сам.

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.