scrollTop doesn't work

Best Adobe community,

I've added a button to my webpage that when clicked assigns the value 0 to the element.scrollTop property with no success. I'll post all code below, except the CSS that most importantly specifies the initial value of display:none and styles the button:

HTML:

<button id="top_btn" title="Go to top">

<!-- top_btn -->

<span class="glyphicon glyphicon-chevron-up"></span>

<!-- /top_btn -->

</button>

Javascript:

var body = document.body;
var root = document.documentElement;
var topBtn = document.getElementById("top_btn");

window.onscroll = function() {
"use strict";
scrollFunction();
};

function scrollFunction() {
"use strict";
if (body.scrollTop > 702 || root.scrollTop > 702) {
topBtn.style.display = "block";
}
else {
topBtn.style.display = "none";
}
}

function topFunction() {
"use strict";
body.scrollTop = 0;
root.scrollTop = 0;
}

topBtn.onclick = topFunction();

The button is successfully revealed but nothing happens onclick...

Thank you on beforehand!

Regards,

Andreas