Sticky Navigation с плавной прокруткой прыгает

У меня возникают всевозможные проблемы с навигацией и плавной прокруткой. Я просто недостаточно знаю о jQuery, чтобы устранять неполадки. Я использую фрагмент плавной прокрутки от Криса Койера: http://css-tricks.com/snippets/jquery/smooth-scrolling/. Моя страница находится здесь: http://clients.ekcetera.com/agivingchance.

Вот мои проблемы:

  1. Для любого из элементов навигации он частично прокручивается, а затем переходит к местоположению. Я почти уверен, что это потому, что я не знал, как учитывать липкий заголовок, поэтому я немного приподнял якорь, чтобы учесть высоту якоря. Итак, он добирается до якоря и останавливается, но потом прыгает в нужный вид.
  2. При нажатии кнопки «Назад» кажется, что она не всегда переходит в нужное место — иногда это довольно случайно. Я думаю, что это связано с проблемой 1, и, надеюсь, она разрешится сама собой. Я бы даже не возражал против удаления истории браузера/кнопки «Назад», но, как я уже сказал, мне недостаточно мастера JQuery, чтобы знать, что нужно удалить.

Какие-либо предложения?

Заранее спасибо!


navigation jquery header smooth-scrolling sticky
person kgarrett    schedule 19.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

1. Используйте этот код из комментария Девина Стерджена к посту с плавной прокруткой. Кроме того, я добавил небольшое вычитание, чтобы компенсировать ваш липкий заголовок. Настроить по душе.

// your functions go here 
$('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 - 181
            }, 1000);
            return false;
        }
    }
});

2. Переместите все привязки к фактическому элементу, к которому вы хотите прокрутить.

(ссылка: http://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181)

person rocky    schedule 19.10.2012