Срабатывание скрипта если ширина экрана меньше 767

Question

Скролл должен срабатывать когда ширина экрана меньше или равно 767px, если больше – скрипт не должен срабатывать.

function windowSize(){
    if ($(window).width() <= '767'){
        $('#test').on('click', function(e) {
            $('html,body').animate({
              scrollTop: $('.test2').offset().top + "px"
              }, {
                duration: 1E3
            });
          });
    } else {
    }
}

.test2 {
  height: 200px;
  width: 200px;
  margin-top: 1000px;
  background: red;
}

<button id="test">
  Кнопка скролла которая срабатывает если ширина меньше 767
</button>

<div class="test2"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Решение на нативном JS:

// Сперва пишем функцию с условием:
function scrollFunctions() {

    var btn = document.getElementById('test');
    // Вызываем скролл по клику при выполнении условия
    if (document.documentElement.clientWidth <= 767) {
        btn.addEventListener('click', scrollTop);
    } 
    // Убираем скролл по клику при не выполнении условия
    else{ 
        btn.removeEventListener('click', scrollTop);
    }
}

// Потом функцию для самого скролла:
function scrollTop(){
    window.scrollTo({
        top: 400,
        behavior: 'smooth',
    });
}

// А потом вызываем нашу функцию с условием, 
// которая при выполнении условия вызывает функцию со скроллом:
window.addEventListener('load', scrollFunctions);
window.addEventListener('resize', scrollFunctions);

#body {
  height: 1000px;
  background: lightblue;
}

<div id='body'>
  <button id='test'>Click to scroll</button>
</div>

БЛОГ НА HUSL

Срабатывание скрипта если ширина экрана меньше 767

Ответы (1 шт):