Animate.scroll not working in Firefox

JavaScript
1

I have the following function to scroll to the next div:

$(".arrow-wrap").click(function() {
    $('html, body').animate({
        scrollTop: $(".intro").offset().top
    }, 2000);
});

This works fine in Chrome but in Firefox nothing is happening. What can be the reason

2

Hi,

Seems to work for me in Firefox on the mac ok.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
.intro {
	background:red
}
</style>
</head>

<body>
<p class="arrow-wrap">Click Me</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div class="intro">
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(".arrow-wrap").click(function() {
    $('html, body').animate({
        scrollTop: $(".intro").offset().top
    }, 2000);
});
</script>
</body>
</html>
3

Hi Paul. Thx for the reply. For me it still isn’t.

http://seev.dutchmotorbikes.nl/

Not sure what is wrong?

4

Where’s your doctype for a start? (That’s probably not the issue but needs to be fixed)

6

Just checked and adding the doctype makes it work.

<!DOCTYPE HTML>
7

Hi Paul You’re a hero. Thank you so much :slight_smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.