Highlighted

scrollTop doesn't work

Explorer ,
May 03, 2018

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

TOPICS
Learn Dreamweaver

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

scrollTop doesn't work

Explorer ,
May 03, 2018

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

TOPICS
Learn Dreamweaver

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 03, 2018 0
LEGEND ,
May 03, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
LEGEND ,
May 03, 2018

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
Explorer ,
May 03, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
LEGEND ,
May 03, 2018

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..

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 1
Explorer ,
May 03, 2018

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
LEGEND ,
May 03, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
Explorer ,
May 04, 2018

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();
});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2018 0
LEGEND ,
May 04, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2018 0
Adobe Community Professional ,
May 04, 2018

Copy link to clipboard

Copied

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

Smooth Scrolling | CSS-Tricks

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2018 0
LEGEND ,
May 07, 2018

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 07, 2018 0