Плавный прокрутка скачков странно

Question

$(function() {$('a[href*=#]:not([href=#])').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
    if (target.length) { 
    $('html,body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    if (target.length <= 1000) { 
     $('html,body').animate({ 
     scrollTop: target.offset().top - 60 
     }, 1000); 
    }; 
    return false; 
    } 
}});}); 

Я работаю с навигационной панелью, которая фиксируется с максимальным шириной экрана < 1000px.
Высота навигационной панели 60 пикселей. Таким образом, он идет назад с анимацией 60px, если max - с < 1000px.

Все это прекрасно работает, но моя проблема заключается в том, что страница скачет странно только в том случае, когда область просмотра больше 1000 пикселей.

Answer 1

Я думаю, проблема в том, что вы не предотвращаете событие click по умолчанию. Это означает, что браузер переходит к нужному #id (поскольку это поведение браузера по умолчанию), а затем плавные прокрутки в триггере запускают анимацию с самого начала, что приводит к быстрому прыжку.

, чтобы исправить это просто блокировать событие по умолчанию с preventDefault();

Быстрый пример:

$('selector').click(function(e) { 
    e.preventDefault(); 
    // your code 
}); 

Исправлен код:

$(function() { 
    $('a[href*=#]:not([href=#])').click(function(e) {e.preventDefault(); { 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top 
       }, 1000); 
       if (matchMedia('only screen and (max-width: 1000px)').matches) { 
        $('html,body').animate({ 
         scrollTop: target.offset().top - 60 
        }, 1000); 

        return false; 
       } 
       } 
      } 
      } 
    }); 
});