/* * (C)2017 Sergej Qkowlew Public Domain Сергей Яковлев. Общественное достояние * http://gfns.net/doc/topscroll.shtml * Opaque animation was found анимация прозрачности была где-то на * somewhere on flibuster.com * triangle found in habrahabr треугольник найден где-то на Хабре */ var BackGround, Filter; if ('\v'=='v') { // https://habrahabr.ru/post/50544/ отличить IE BackGround = '#808080'; // цвет кнопки для IE Filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; } else { BackGround = 'rgba(128,128,128,0.2)'; // цвет и прозрачность кнопки Filter = ''; } var keep_topscroll; (function() { function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 12; 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 = "top.goTop(" + acceleration + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } function scrollTop(){ var a = document.getElementById('topscroll'); if( ! a ){ // если нет элемента добавляем его var a = document.createElement('a'); a.id = "topscroll"; a.href = "#"; a.style.display = "none"; a.style.position = "fixed"; a.style.zIndex = "9999"; a.style.position ='fixed'; /* a.style.width = '50px'; a.style.height = '50px'; // высота кнопки */ a.style.bottom = '30px'; // вариант top a.style.right = '1%'; // вариант left a.style.textAlign = 'center'; // чтоб внутри было по центру a.style.padding = '5px 10px 10px 10px'; // поля вокруг внутреннего текста a.style.background = BackGround; // цвет и прозрачность кнопки if (Filter != '') { a.style.filter = Filter; } a.style.borderRadius = '6px'; // скругление рамки кнопки a.style.border = '1px solid grey'; // толщина и цвет рамки кнопки a.onclick = function(e){ e.preventDefault(); window.top.goTop(); } a.onmouseover = function(e){ e.preventDefault(); a.style.background = 'white'; } a.onmouseout = function(e){ e.preventDefault(); a.style.background = BackGround; if (Filter != '') { a.style.filter = Filter; } } document.body.appendChild(a); } var stop = (document.body.scrollTop || document.documentElement.scrollTop); if( stop > 300 ){ a.style.display = 'block'; // начало отрисовки треугольника a.innerHTML='
'; // конец отрисовки треугольника smoothopaque(a, 'show', 30); } else { smoothopaque(a, 'hide', 30, function(){a.style.display = 'none';}); } return false; } // Плавная смена прозрачности function smoothopaque(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(); } setopacity(el, op); } } // установка opacity function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = 'alpha(opacity=' + opacity + ')'; } if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window['top'].goTop = goTop; })();