Проблема с плавной прокруткой, исправленной навигацией и iPad 2

Question

Я разрабатываю одностраничный свадебный сайт для друга. Он использует приведенный ниже jQuery, чтобы добавить эффект "плавной прокрутки" на страницу при нажатии на точки навигации.

Я добавлю адаптивный макет для iPad и iPhone - но они готовы запустить его как можно скорее, и мне нужно перейти к приглашениям!

Во всяком случае, я испытываю странное поведение на iPad - где плавная прокрутка работает только на 1-й ссылке, которую вы нажимаете, - и тогда ни одна из набивочных ссылок не вызывает поведение / кажется кликабельным.

Я предполагаю, что это проблема с фиксированной навигацией - однако она работает в любом другом (mac) браузере, на котором я тестировал, и на моем iPhone.

Сайт здесь

http://www.elandsebswedding.co.uk/main-page/

JQuery здесь:

$("nav ul li a, #logo a").click(function(event){
    //prevent the default action for the click event
    event.preventDefault();
    var full_url = this.href;

    var parts = full_url.split("#");
    var trgt = parts[1];

    var target_offset = $("#"+trgt).offset();
    var target_top = target_offset.top;

    $('html, body').animate({scrollTop:target_top -130}, 500);

});

Любые предложения / обходные пути будут с благодарностью!

Answer 1

Это проблема с мобильным Safari.

Хакерский способ решить эту проблему - добавить что-то в DOM с помощью функции обратного вызова animate.

$('html, body').animate({scrollTop:target_top -130}, 500, function(){
    $('body').append('<div id="device-dummy" style="height: 1px;"></div>');
});

Вы можете найти этот плагин jQuery полезным https://github.com/jamesmusgrave/jQuery-One-Page-Nav