Menu
I've tried using scrollTop as well as scrollTop() and it always returns 0. How can this be, I've tried it like this:
Template.myHome.events({
"click .examine": function(event){
event.preventDefault();
varPos = event.clientY;
var yPos = document.body.scrollTop;
console.log("Y coords: " + yPos);
}
});
as well as using the JQuery version on several div's within and including the body tag, again all giving me 0 or null.
All I simply want is to get the number of pixels traversed on the y-axis as the user scroll downs the page.
892
The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.
If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.
scrollTop is deprecated in strict mode.
An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .
Depending on the implementation, the element that scrolls the document can be <html> or <body>.
CSSOM View introduces document.scrollingElement (see mailing thread), which returns the appropriate element:
document.scrollingElement.scrollTop;
Alternatively, you can use window.scrollY or window.pageYOffset. They are aliases and return the same value, but the latter has more browser support.
For browsers which don't support any of the above, you can check both of these:
document.documentElement.scrollTop;
document.body.scrollTop;
var scrollTests = document.getElementById('scrollTests');
var tests = [
"document.body.scrollTop",
"document.documentElement.scrollTop",
"document.scrollingElement.scrollTop",
"window.scrollY",
"window.pageYOffset"
];
for(var i=0; i<tests.length; ++i) {
var p = scrollTests.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode(tests[i] + ' = '));
p.appendChild(document.createElement('span')).id = tests[i];
}
window.onscroll = function() {
for(var i=0; i<tests.length; ++i) {
try{ var val = eval(tests[i]); }
catch(err) { val = '[Error]'; }
document.getElementById(tests[i]).innerHTML = val;
}
};#scrollTests {
position: fixed;
top: 0;
}
body:after {
content: '';
display: block;
height: 999999px;
}<div id="scrollTests"></div>You need to add following CSS to body tag
body {
height: auto !important;
}
then check for document.body.scrollTop which will give you the correct scroll value
23
This cover both html and body element, cross browser (tested on Chrome/Canary, FF, Edge, IE11)
function getScrollTop() {
alert(Math.max(document.body.scrollTop,document.documentElement.scrollTop));
}Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
<button onclick="getScrollTop();">Click me</button>
function topScrollFunction() {
if (document.documentMode || /Edge/.test(navigator.userAgent)){
$('body').css('height', 'auto');
window.scrollTo(0,0);
}else {
window.scrollTo(0,0);
}
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
