if scroll, go top?

Question

eg. If the user uses his scroll to go back up ^ from a lower section of my website, i want him to be bounced back all the way. and not being able to stay midway of the website.

an easy jquery easing function with a scroll function attached to it. Does anyone consume the knowledge of that in here, if so: i would be very greatfull!

Have a nice day, greetings.

Try Googling the part of the text above that describes your problem: [*easy jquery easing function with a scroll function*](https://www.google.co.uk/search?q=easy+jquery+easing+function+with+a+scroll+function) — Barney, Jan 16 '14 at 17:35
If you're looking to use the mouse wheel for events, see this post: http://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery — Aaron, Jan 16 '14 at 17:36

score 0 · Answer 1 · answered Jan 16 '14 at 17:38

0

try something:

$(document).ready(function(){
   $(document).on('mousewheel', function(e){
      if(e.originalEvent.wheelDelta > 0) { // if scrolling towards up
          $('body').scrollTop(0);
      }          
   });
});

answered Jan 16 '14 at 17:38

Zaheer Ahmed

28,160
11
74
110

That also works scrolling down... – Alvaro Jan 16 '14 at 17:39
That doesn't work on Firefox – Alvaro Jan 16 '14 at 17:49
I am very thankfull for your answer (solution) Zaheer. Even if it didnt work 100% perhaps you could help me with implementing a animate solution on Alvaro's answer (since I cannot get it to work) greetings. – Joel Jan 16 '14 at 18:26
@Zaheer Scrolling down works for some odd reason.... (with the code that you posted) – Joel Jan 16 '14 at 19:16

Alvaro · Accepted Answer · 2014-01-16T18:03:46.717

0

This should work in all browsers:

$(document).ready(function () {

    if (document.addEventListener) {
        document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener("DOMMouseScroll", MouseWheelHandler, false); //Firefox
    } else {
        document.attachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8
    }


   function MouseWheelHandler(){

        // cross-browser wheel delta
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling up?
        if (delta >= 0) {
            $('body').scrollTop(0);
        }
    }
});

edited Jan 16 '14 at 18:03

answered Jan 16 '14 at 17:40

Alvaro

40,778
30
164
336

@Joel please see my answer again. I forgot it didn't work in Firefox. I've updated it with the correct solution. Also if you find it useful please accept it :) – Alvaro Jan 16 '14 at 17:49
Hi again, yes it works very good. i've tried it cross-browser wise and it seems to work fine (even in IE ^^ ). However, i'm not sure what I'm doing wrong when I apply .animate({},2000); any ideas why it wont work? – Joel Jan 16 '14 at 17:59
however, now since ur last update. there seems to be an error on line 21. I've tried to locate the incorrect closing tag but i'm unable to find it. :/ – Joel Jan 16 '14 at 18:02
@Joel try it again, The second `)` at the end was wrong should be a `}`. I've updated the answer. – Alvaro Jan 16 '14 at 18:04
Yeah I saw that, i removed it a few seconds ago. Thanks again for the great support! However, when i try to apply an animate function to : $('body').scrollTop(0); it doesnt work. here's what I've written: $('body').scrollTop(0).animate({},2000); Thanks again for your expertise! – Joel Jan 16 '14 at 18:06
Scrolling down works for some odd reason.... (with the code that you posted) – Joel Jan 16 '14 at 19:16
@Joel what do you mean with "scrolling down works"? If you add yoru code inside the condition `delta>=0` it will only work on scrolling up with the mousewheel. Take a look a this living example: http://jsfiddle.net/8Lj5S/1/ – Alvaro Jan 17 '14 at 10:27

if scroll, go top?

2 Answers2