jQuery scrollTo not working body,html set 100%

Just had some awesome help from a SO user regarding this question:

jQuery on window scroll animate background image position

As you can see here I wanted to scroll a divs background image incrementally when a user scrolls the page. See this for working version:

http://jsfiddle.net/nicklansdell/HFxVj/4/

The answer given works perfectly. However as well being able to scroll the page with the browsers scroll bar I also want to include some extra functionality that scrolls the p开发者_开发技巧age to a divs hash position when an anchor(s) is clicked. I am using the scrollTo plugin to achieve this which worked perfectly until I included the following CSS:

body, html {
    height: 100%;
    min-height: 100%;
}

Unfortunately if I include this the page scrollTo animation doesn't work but including it allows the background image position animation to work, it seems to be one or the other, but of course I need both :-) Can anyone suggest a workaround here? Many thanks in advance.

EDIT*

I have narrowed my problem down a little. The problem is not to do with the body,html being set to height 100%. It is down to giving the #page div a physical height. It requires a height of 100% for the background image scroll but requires no height to be specified for the scrollTo to work. Please see my JSFiddle http://jsfiddle.net/nicklansdell/HFxVj/4/ update and play around with the #page styling to see what I mean.

Are you using $.scrollTo('selector-for-target-element', time); for doing the scrolling? for this syntax, either of HTML of body needs to have height auto. I had similar issue and i resolved by explicitly mentioning the parent div which needed to be scrolled.

$('parent-div-selector').scrollTo('selector-for-target-element', time);
instead of 
$.scrollTo('selector-for-target-element', time);

and it worked.

Hope it helps.

Just a longshot - have you tried to apply the css to either body or html, instead of both of them?

only body:

body { 
height: 100%;
min-height: 100%;
}

only html:

html { 
height: 100%;
min-height: 100%;
}

Only apply the height to body, not html.