My JQuery scroll to top function works just fine in other browsers, but not Firefox?

I have a js file that is called from my functions.php file on my website. All of my functions work in all browsers, except a scroll to top function that doesn't work in Firefox.


In the following is my functions.php file:

<?php
function my_scripts_method() {
// register your script location, dependencies and version
   wp_register_script('Beginning-jqstuff',
   get_template_directory_uri() . '/js/jqstuff.js',
   array('jquery'),
   '1.9.2' );
 // enqueue the script
  wp_enqueue_script('Beginning-jqstuff');
  }
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Open in new window



The following has my jQuery code for the scroll to top function:

$("#topPage").css("display", "none");
    $(window).scroll(function(){
    if($(window).scrollTop() > 0){
    console.log("is more");
    $("#topPage").fadeIn("slow");
    }
    else {
    console.log("is less");
    $("#topPage").fadeOut("slow");
 
    }
    });
   
    $("#topPage").click(function(){
 
    event.preventDefault();
    $("html, body").animate({
    scrollTop:0
    },"slow");
    });
    });

Open in new window

lnic1221Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can you provide us with a link so we see what is happening
0
lnic1221Author Commented:
0
Julian HansenCommented:
I suspect the problem is you are using the 'event' var here but it is not defined
// When the user clicks the toTop button, we want the page to scroll to the top.
$("#topPage").click(function(){
    // Disable the default behaviour when a user clicks an empty anchor link.
    // (The page jumps to the top instead of // animating)
    event.preventDefault();
 
    // Animate the scrolling motion.
    $("html, body").animate({
    scrollTop:0
    },"slow");
});

Open in new window


Update this line as shown in text below
$("#topPage").click(function(event){ /

Open in new window

// When the user clicks the toTop button, we want the page to scroll to the top.
$("#topPage").click(function(event){ // ADD event PARAMETER HERE
    // Disable the default behaviour when a user clicks an empty anchor link.
    // (The page jumps to the top instead of // animating)
    event.preventDefault();
 
    // Animate the scrolling motion.
    $("html, body").animate({
    scrollTop:0
    },"slow");
});

Open in new window

1
Ray PaseurCommented:
This seems to test out OK.  Lines 28-36 play together with the link on line 47.
http://iconoun.com/demo/temp_lnic1221.php
<?php // demo/temp_lnic1221.php
error_reporting(E_ALL);


// USE PHP TO CREATE A LONG VERTICAL WEB PAGE FOR OUR HTML
$dat = date('r');
$xyz = "Hello world, this page was rendered at $dat";
$abc = NULL;
for ($i = 0; $i <= 99;$i++)
{
    $abc .= "<br>X - $i";
}


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("a[href='#top']").click(function() {
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<p>$xyz</p>
<p>$abc</p>

<p><a href="#top">Scroll to top</a></p>

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Just a comment on your solution.

In your test page you have commented out the following line

$("#topPage").click(function(){
    //event.preventDefault(); /* COMMENTED OUT */
    $("html, body").animate({
    scrollTop:0
    },"slow");
});

Open in new window


There was nothing wrong with your code - in fact generally speaking that is the correct thing to do if you want to prevent the click on the <a> element from bubbling up. All you needed to do was to add 'event' as a parameter to the function as shown below. This would have had the same effect and technically would be more correct.

$("#topPage").click(function(event){ /* event PARAMETER ADDED */
    event.preventDefault(); 
    $("html, body").animate({
    scrollTop:0
    },"slow");
});

Open in new window

So, in answer to the question posed
My JQuery scroll to top function works just fine in other browsers, but not Firefox?
The answer is because you did not include the event parameter in the function definition.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.