Кнопка scroll to для любого разрешения экрана

82
08 апреля 2021, 21:40

Как сделать, чтобы вот такая 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>
Answer 1
$(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);
   })
})
Answer 2
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'
  });

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

READ ALSO
Как сделать функцию , которая возвращает setTimout
javascript

Как сделать функцию , которая возвращает setTimout

Как сделать функцию , которая возвращает setTimout с переменной заданной как аргумент функцииЕсть функция -

 109
Как вытащить свойство из массива древовидных объектов в js?
javascript

Как вытащить свойство из массива древовидных объектов в js?

Вопрос:как создать массив из title'ов?

 107
Кому задавать атрибуты, потомку или родителю?
CSS

Кому задавать атрибуты, потомку или родителю?

Какая структура с точки зрения CSS правильная? Вариант 1:

 99
Как отобразить булеты строк в richedit?
c++

Как отобразить булеты строк в richedit?

Поддерживает ли richedit "внешние" булеты, можно ли ими управлять? (ну как в notepad++ кругляшок возле нумерации строк) Пример создания контрола ниже

 88