#onscroll

Отличия колёсика от прокрутки

Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.

При прокрутке срабатывает событие onscroll — рассмотрим его в дальнейшем. Оно произойдёт при любой прокрутке, в том числе через клавиатурy, но только на прокручиваемых элементах. Например, элемент с overflow:hidden в принципе не может сгенерировать onscroll.

А событие wheel является чисто «мышиным». Оно генерируется над любым элементом при передвижении колеса мыши. При этом не важно, прокручиваемый он или нет. В частности, overflow:hidden никак не препятствует обработке колеса мыши.

Кроме того, событие onscroll происходит после прокрутки, а onwheel — до прокрутки, поэтому в нём можно отменить саму прокрутку (действие браузера).

https://learn.javascript.ru/mousewheel

So for my site StatusPeople.com I wanted to add a scroll top button -- like the one on Tumblr. 

I scratched my head a bit and had a play around and here is what I came up with...    

//Bind scroll event to window $(window).bind('scroll',function() { var v; //Get the scroll position v = $(this).scrollTop(); //If scroll position is greater than 400px add button if (v>400) { if (!$('#topbutton').length) { var div = $('<div/>'); div.attr('id','topbutton'); div.text('Top'); div.hide(); div.appendTo('body').fadeIn(1500); } } else { //If button exists and scroll position is less than 400px remove button if ($('#topbutton').length) { $('#topbutton').fadeOut(1000,function(){ $(this).remove(); }); } } }); function ScrollTo(id,time,minus) { $('html, body').animate({ //Scroll to the top of any page element scrollTop: $(id).offset().top-minus }, time); } //Button click event, remember it's dynamic so we use live to bind the event $('#topbutton').live('click',function() { //Scroll page back to top of page ScrollTo('body',1500,0); });

It's pretty straight forward. We just add or remove the scroll button based on the scroll position. And if the the top button is clicked the page scrolls up and the button disapears.