scrollTop doesn't work

[Guest]

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

[WolfShade · Accepted solution]

topBtn.addEventListener('click',topFunction,false);

HTH,

^ _ ^

[WolfShade]

Thank you for marking my answer as correct.  I do appreciate it.

According to MDN, only Chrome and Edge support .onclick, with no definite support in FireFox, IE, Safari, or Opera.

V/r,

^ _ ^

[Guest]

Is that you between Bill Nye and Neil deGrasse Tyson? ^_^

Might "I 'do' appreciate it" allude to a little bit of irony? He, he, he...

So it wasnt anything wrong with my code, functionally speaking, right?

[WolfShade]

https://forums.adobe.com/people/Dominus+AB  wrote

So it wasnt anything wrong with my code, functionally speaking, right?

No, it was syntactically correct, but only for Chrome and Edge.  It just may or may not work in other browsers.  The addEventListener is DOM compliant and I believe fully supported in all browsers (IE didn't start until v9; you had to use the proprietary .addEvent() for IE <= 8).

https://forums.adobe.com/people/Dominus+AB  wrote

Is that you between Bill Nye and Neil deGrasse Tyson? ^_^

ME ME ME ME ME ME ME ME ME ME ME!  ME ME ME ME ME ME ME ME?  ME ME ME ME ME ME ME ME ME ME..

^ _ ^

[Guest]

Now that I have your attention, how would you make that a scrolling transition to the top rather than a pop? Even if it's simple I'd like to see your method. Keep in mind that I do strive after the most concise and reliable approach

Thank you so much cool guy, WolfShade!

[WolfShade]

I've never done that with vanilla JavaScript, but you _can_ do it with jQuery.animate().

V/r,

^ _ ^

[Guest]

What about this, WolfShade?

var root = document.documentElement;
var body = document.body;
var btn = document.getElementById("top_b");

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

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

$("#top_b").click(function() {
"use strict";
$("html, body").animate({scrollTop:0}, 2000);
return false;
});

$(window).on("mousewheel", function() {
"use strict";
$("html, body").stop();
$("#top_b").blur();
});

[osgood_]

If you are going to use jQuery for the smooth animation back to top then you might as well use ALL jQuery, not mix and match, although you can do.

If you give your back to top button a class of 'scrollTop' then the below bit of jQuery should be all you need to create a nice smooth back to top scroll. Obviously you need to include the link to the jQuery library.

<script>

$(document).ready(function() {

$(window).scroll(function() {

var topDistance = $(this).scrollTop();

if (topDistance > 100) {

$('.scrollTop').css("display", "block");

} else {

$('.scrollTop').css("display", "none");

}

});

$('.scrollTop').click(function() {

$('html, body').animate({

scrollTop: 0

}, 800);

return false;

});

});

</script>

[Nancy OShea]

jQuery Smooth Scrolling is described below with code and a working example.

Smooth Scrolling | CSS-Tricks

[WolfShade]

Sorry, dude.  Took Friday off for an extended weekend in Chicago.    Just got back to my desk a little while ago.

Seems like osgood_ and Nancy got you covered, tho.

V/r,

^ _ ^