Question

I’m developing a one page, wedding site for a friend. It uses the below jQuery to add a ‘smooth scroll’ effect to the page when clicking on the nav points.

I will be adding an adaptive layout for iPads and iPhones – but they’re keen to launch it ASAP and I need to move on to the invites!

Anyhow, I’m experiencing strange behaviour on the iPad – where as the smooth scroll only works on the 1st link you click – and then none of the nab links trigger the behaviour / seem clickable.

I’m assuming that this is an issue with the fixed navigation – however it’s working in every other (mac) browser I’ve tested on and my iPhone.

The site is here

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

The jQuery is here:

$("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);

});

Any suggestions / work arounds would be greatly appreciated!

Answer 1

This is an issue with mobile Safari.

A hacky way to solve it is by appending something to the DOM using the animate callback.

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

You might find this jQuery plugin useful
https://github.com/jamesmusgrave/jQuery-One-Page-Nav