Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Copy link to clipboard
Copied
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,
^ _ ^
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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..
^ _ ^
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
Copy link to clipboard
Copied
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();
});
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
jQuery Smooth Scrolling is described below with code and a working example.
Copy link to clipboard
Copied
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,
^ _ ^