Back to top button not working in Firefox and IE

Question

I'm trying to create a simple back to to button with jQuery which works well in Chrome but it doesn't work in Firefox and IE. Actually the JSFiddle below doesn't work even in Chrome.

JSFiddle

HTML:

<body>
  <div>
   <span>My long text here.</span>
  </div>
  <div class="back-to-top" onclick="backToTop()"></div>
</body>

javaScript:

function backToTop () {
$("body").animate({ scrollTop: 0 }, 700);
}

And I'm using the latest jQuery library.

JSFiddle doesn't work because it doesn't like inline javascript, you should get into the habbit of not using it because it is nasty. You should register events like: `$(".back-to-top").click(backToTop);` — musefan, Mar 06 '14 at 17:06

score 5 · Accepted Answer · answered Mar 06 '14 at 17:03

change it to

function backToTop () {
    $("html, body").animate({ scrollTop: 0 }, 700);
}

IE and firefox attaches the scrollbar to the html element, while chrome uses body

The reason your fiddle doesn't work is because you're using the "onload" handler, which wraps the javascript in a function, so your function is out of scope.

Here's a working FIDDLE

Back to top button not working in Firefox and IE

1 Answers1