0

Всем привет, Я использую этот простенький код для плавного скролла по якорям и всё это чудесно работает:

function scrollNav() {
  $('a[href*="#"]').click(function(){
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 73
    }, 400);
    return false;
  });
}
scrollNav();

НО, на разрешениях 1023 - 1367 был применен медиа запрос для более читабельного вида сайта :

@media (min-width: 1023px) and (max-width: 1367px) {
    body {
      zoom: 0.8;
    }
}

И вот как раз скролл по якорям на этих резолюциях работает некорректно.

Может кто подскажет как решить эту задачу?

Спасибо за любую помощь

1
  • Добавьте поддержку мозилы -moz-transform: scale(0.8);
    – Bert
    11 фев 2019 в 19:04

1 ответ 1

2

умножать прокрутку тоже на 0.8 при этих разрешениях

function scrollNav() {
  $('a[href*="#"]').click(function(){
  
    let scrollTop = $( $(this).attr('href') ).offset().top;
    if($(window).width() > 1023 && $(window).width() < 1376){
      scrollTop = scrollTop*0.8;
    }
    
    $('html, body').stop().animate({
        scrollTop: scrollTop - 73
    }, 400);
    return false;
  });
}
scrollNav();

1
  • Спасибо, правда Ваш вариант не сработал, потому я немного подправил ответ. 11 фев 2019 в 21:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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