.animate function help please

[bambinou]

Hello,

I would like to include the .animate function into the code below but I am struggling with the implementation and would need a little help please:


Here is the code that will get the id element of my div and automatically goes to them when I click on the corresponding button:
<script type="text/javascript">
var $fixedElement = $('#content'); //replace it with your "fixed" element

$fixedElement.css({ "position": "relative" });
window.scroll(0, 0);
$fixedElement.css({ "position": "fixed" });
</script>

Here is the animate function:
.animate({scrollTop:$(this.hash).offset().top}, 500);

I cannot work out how to add them together , should it be something like:

<script type="text/javascript">
var $fixedElement = $('#content'); //replace it with your "fixed" element
$('#content').animate({scrollTop:$(this.hash).offset().top}, 500);
$fixedElement.css({ "position": "relative" });
window.scroll(0, 0);
$fixedElement.css({ "position": "fixed" });
</script>

[holyhttp]

The solution to your problem is on the What are you trying to achieve and not How to achieve it. If we understand the problem then we can help you find the solution otherwise I can just blindly look at your code and suggest some syntax corrections.

$(this) instead of $(this.hash) to refer to the current element ('#content')
I can only guess the "hash" pertains to the hash value of the url or the href attribute in an anchor.

Here is a thought:

$('a [href=^"#"]').click(function(){
var $hash=$(this).attr('href');

$('#content').animate({scrollTop:$($hash).offset().top}, 500, function(){
$(this).css({ "position": "relative" });
window.scroll(0, 0);
$(this).css({ "position": "fixed" });
});

});


Of course I am just speculating at this point until I fully understand your problem.

[bambinou]

Hi HolyHttp,

Thank you so much for the reply:-)

My apology for not explaining the problem properly.

I have a page with tick boxes, about 125 of them using a form made via jotform.
Each tick box has a picture with a product. To help people scrolling the page faster, I have created a floating bottom bar with categories.

On a desktop or laptop, when I click on a category, the page rolls down very well, but on the ipad, the page rolls down when clicking on the first button then it freezes, the user must move the page with the finger of at least 1 px in order to unlock the roll on effect when pressing another button. It is apparently a known problem in the iPad browser.

Some had suggested to create a roll on effect and have another code that moves the page up and down or 1 px after the roll on.

What would be your suggestion please? I am not too good with javascript, this is the reason why I cannot go on my own and invent something without a little help.

If you type:
"scrollTop not working on the ipad" in Google you will find a lot of people with the same problem, some say they have found solutions but I cannot always work them out...


Thank you so much,


Ben