Without JQuery. Full script version
/**
* Скрипт Скроллинга: кнопка наверх
* css class кнопки: scrollTop
*/
window.top = {};
var sc = window.top;
sc.time = 12; // время прокручивания
sc.goTop = function (time, acceleration) {
acceleration = acceleration || 0.1;
time = time || sc.time;
var dx = 0;
var dy = 0;
var bx = 0;
var by = 0;
var wx = 0;
var wy = 0;
if (document.documentElement) {
dx = document.documentElement.scrollLeft || 0;
dy = document.documentElement.scrollTop || 0;
}
if (document.body) {
bx = document.body.scrollLeft || 0;
by = document.body.scrollTop || 0;
}
var wx = window.scrollX || 0;
var wy = window.scrollY || 0;
var x = Math.max(wx, Math.max(bx, dx));
var y = Math.max(wy, Math.max(by, dy));
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
var invokeFunction = "window.top.goTop("+ time +")"
window.setTimeout(invokeFunction, time);
}
return false;
}
sc.showHide = function (){
var a = document.getElementById('gotop');
if( ! a ){
// если нет элемента добавляем его
var a = document.createElement('a');
a.id = "gotop";
a.className = "scrollTop";
a.href = "#";
a.style.display = "none";
a.style.position = "fixed";
a.style.zIndex = "9999";
a.onclick = function(e){ e.preventDefault(); window.top.goTop(); }
document.body.appendChild(a);
}
var stop = (document.body.scrollTop || document.documentElement.scrollTop);
if( stop > 300 ){
a.style.display = 'block';
sc.smoothopaque(a, 'show', 30, false);
} else {
sc.smoothopaque(a, 'hide', 30, function(){a.style.display = 'none';});
}
return false;
}
// Плавная смена прозрачности
sc.smoothopaque = function (el, todo, speed, endFunc){
var
startop = Math.round( el.style.opacity * 100 ),
op = startop,
endop = (todo == 'show') ? 100 : 0;
clearTimeout( window['top'].timeout );
window['top'].timeout = setTimeout(slowopacity, 30);
function slowopacity(){
if( startop < endop ){
op += 5;
if( op < endop )
window['top'].timeout = setTimeout(slowopacity, speed);
else
(endFunc) && endFunc();
}
else {
op -= 5;
if( op > endop ){
window['top'].timeout = setTimeout(slowopacity, speed);
}
else
(endFunc) && endFunc();
}
// установка opacity
el.style.opacity = (op/100);
el.style.filter = 'alpha(opacity=' + op + ')';
}
}
if (window.addEventListener){
window.addEventListener("scroll", sc.showHide, false);
window.addEventListener("load", sc.showHide, false);
}
else if (window.attachEvent){
window.attachEvent("onscroll", sc.showHide);
window.attachEvent("onload", sc.showHide);
}
Compressed
(function(){function b(){var a=document.getElementById("gotop");a||(a=document.createElement("a"),a.id="gotop",a.className="scrollTop",a.href="#",a.style.display="none",a.style.position="fixed",a.style.zIndex="9999",a.onclick=function(a){a.preventDefault();window.top.goTop()},document.body.appendChild(a));1100<(document.body.scrollTop||document.documentElement.scrollTop)?(a.style.display="block",l(a,"show",30,!1)):l(a,"hide",30,function(){a.style.display="none"});return!1}function l(a,e,f,c){function k(){g<
h?(d+=5,d<h?window.top.timeout=setTimeout(k,f):c&&c()):(d-=5,d>h?window.top.timeout=setTimeout(k,f):c&&c());var e=a,b=d;e.style.opacity=b/100;e.style.filter="alpha(opacity="+b+")"}var g=Math.round(100*a.style.opacity),d=g,h="show"==e?100:0;clearTimeout(window.top.timeout);window.top.timeout=setTimeout(k,30)}window.addEventListener?(window.addEventListener("scroll",b,!1),window.addEventListener("load",b,!1)):window.attachEvent&&(window.attachEvent("onscroll",b),window.attachEvent("onload",b));window.top.goTop=
function(a,e){a=a||0.1;e=e||12;var f=0,c=0,b=0,g=0,d=0,h=0;document.documentElement&&(f=document.documentElement.scrollLeft||0,c=document.documentElement.scrollTop||0);document.body&&(b=document.body.scrollLeft||0,g=document.body.scrollTop||0);d=window.scrollX||0;h=window.scrollY||0;f=Math.max(d,Math.max(b,f));c=Math.max(h,Math.max(g,c));g=1+a;window.scrollTo(Math.floor(f/g),Math.floor(c/g));(0<f||0<c)&&window.setTimeout("top.goTop("+a+", "+e+")",e);return!1}})();
CSS
a#gotop {
width:71px;
height:29px;
background-image:url("../images/gotop.png");
position: fixed;
left: 50%;
margin-left: 520px;
bottom:335px;
}