Trying to execute js code when the user scrolls

Question

I am trying to execute some js code, right now they are replaced by alerts, when the scroll-bar has moved from the top to any other height.

So when the user scrolls for the first-time, the alert "scrolled" will fire. and if the user scrolls back to the top, it resets and fires an alert "back at top".

I tried doing this with scrollTop, scrollHeight, and clientHeight, but it doesn't seem to fire the alert on scroll.

I'm not trying to fire the alert everytime the user scrolls, just on the first scroll. But it resets and a new alert is fired if the user scrolls-back to the top.

So if they scroll from top to X, alert "scrolled" fires. If they scroll from X to Y, nothing happens. If the scroll from X or Y to top, "back at top" fires. And then if the scroll from top to X or Y, it has reset and the alert "scrolled" fires (again).

Here is my code:

var body = $('body');
var scrollTop = body.scrollTop;
var difference = body.scrollHeight - body.clientHeight;
var percentScrolled = (scrollTop/difference)*100;
if(percentScrolled > 0){
alert("scrolled!");
}

Update:

I now have this working thanks to one of the comments, it fires the "back to top" alert when scrolled back to the top, but fires the alert "scrolled" on every scroll. How can I get the "scrolled" alert to fire only when the scroll-bar moves from the top to any other location besides the top?

Here is the code:

window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);

    if(percentageScrolled == 0){
        alert("back at top");
    }
    else if(percentageScrolled > 0){
        alert("scrolled");
    }
};

Of course it does, when you scroll back to the top, scrollTop is once again zero. — adeneo, Apr 06 '13 at 19:31
Code http://stackoverflow.com/questions/1247874/changing-scrollbar-position and Example http://jsbin.com/eqote — Grmn, Apr 06 '13 at 19:33
@Grmn Thank you. This helps, but there is still one issue. I updated the post describing it. — IMUXIxD, Apr 06 '13 at 20:18
`if(percentageScrolled > 0){ alert("scrolled"); }` will be executed whenever you start scrolling. and the alert back to top you should changed that into for example 20%, or whatever you want it to be the maximum allowed value for people to scroll down. — Grmn, Apr 06 '13 at 20:32
`else if(percentageScrolled > 0){` change that in to `> 1` now it will fire if scrolling, and only fire back to top if pos = 0. — Grmn, Apr 06 '13 at 21:06
@Grmn okay. But I don't want it to fire every time the user scrolls. Just when the scroll originates from the top. — IMUXIxD, Apr 06 '13 at 21:09
In that case i would say, you might want to use creating a var or in other words create a history. So if user was at bottom or x% then do something when he arrives at 0%. — Grmn, Apr 06 '13 at 21:22
I tried doing something like that and it didn't work. Could you edit your answer to reflect a working example of how you would do that and then I will choose it. — IMUXIxD, Apr 06 '13 at 21:26

score 0 · Answer 1 · answered Apr 06 '13 at 19:55

Not sure what you are trying to do but it sounds like you may want some kind of flag:

var body = $('body');
var scrollTop = body.scrollTop;
var difference = body.scrollHeight - body.clientHeight;
var percentScrolled = (scrollTop/difference)*100;

if(percentScrolled > 0 && this.leftzero === undefined){
   this.leftzero = true;
   alert("scrolled!");
}

Grmn · Accepted Answer · 2013-04-06T21:10:35.693

Exmaple of using javascript to automaticly going back to the top after user scrolls x percent. And as noidea3p5 asked, what is it exactly you are trying to do..

var AllowedPercentageToScroll = 20;
window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);

    if(percentageScrolled > AllowedPercentageToScroll){
       window.scrollTo(0,0); // back to top
    }
    else if(percentageScrolled > 0){ // if user starts to scroll it will trigger
        //do whatever you like, dont recommend alert though
    }
};

Edit: Shows status if at the top, and shows scrolling activity when starting to scroll

window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);

    if(percentageScrolled == 0){
       document.getElementById("status").innerHTML = "Your at the top";    
    }
    else if(percentageScrolled > 1){
        document.getElementById("status").innerHTML = percentageScrolled + "%";      
    }
};

</script>
<body>
<div style="width: 100%; position: fixed; top:0px; background-color:#c0c0c0;">
   Scroll Position: <span id="status">0%</span>
</div>

I don't want to make the user scroll anywhere using .scrollTo or limit how far they can scroll. I just want to listen for when they scroll, from where they scrolled, to where they scrolled, and how much they scrolled. When they scroll from the top to any location on the scroll-bar-track then fire an alert and then the opposite way when they scroll from any location back to the top fire a different alert. The alerts are going to be replaced with other code later. — IMUXIxD, Apr 06 '13 at 21:03
Here you can find a nice example, using plain javascript and also jQuery to detect up / down, in other words, you can by modifying it a little bit, detect where they came from and where to go to. http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction — Grmn, Apr 06 '13 at 22:48

Trying to execute js code when the user scrolls

2 Answers2