// ==UserScript==
// @name TopAndDownButtonsEverywhere
// @description Top and Down buttons everywhere (no Jquery)
// @version 1.6
// @author Max Max
// @license MIT
// @include *
// @icon http://pics.smotri.com/cskins/blue/smiles/bt.gif
// @run-at document-end
// @grant none
// ==/UserScript==
// [1] skip all iframe
if (window.self!=window.top) {return}
// create element
function ce(n) { return document.createElement(n); } // end of function
// add style
function addStyle(css) {
var head = document.head || document.getElementsByTagName('head')[0];
if (head) {
var style = ce("style");
style.type = "text/css";
style.appendChild(document.createTextNode(css));
head.appendChild(style);
} // end if
} // end of function
// global variables
var position,
// figure out if this is moz || IE because they use documentElement
el = (navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('MSIE') != -1) ? document.documentElement : document.body,
// timer
t1, t2,
// speed by
speed_by_click = 500, // edit this value
speed_by_over = 100, // edit this value
// z-index
zIindex = 1001; // edit this value
// move up
function move_up() {
position = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, position-1);
t1 = setTimeout(move_up, speed_by_over);
} // end of function
// move downn
function move_dn() {
position = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, position+1);
t2 = setTimeout(move_dn, speed_by_over);
} // end of function
// document height
function getDocumentHeight() {
return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
} // end of function
// document scroll
function get_scroll(a) {
var d = document,
b = d.body,
e = d.documentElement,
c = "client" + a,
a = "scroll" + a;
return /CSS/.test(d.compatMode)? (e[c]< e[a]) : (b[c]< b[a])
} // end of function
// calk
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20,
newDuration = (typeof(duration) === 'undefined') ? 500: duration;
var animateScroll = function(){
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, newDuration);
element.scrollTop = val;
if(currentTime < newDuration) { setTimeout(animateScroll, increment); }
};
animateScroll();
} // end of function
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
// add css
function shareCSS(){
// variables
var s='', img_up, img_dn;
// img vs button
img_up = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB+SURBVDhPY1i1atV/amAGahgCMoNhaIGlS5cKAp19BoRBbLJcj2QILDJINwzoAmMgfoclIkBixkS5DI8hMJcRNgxoSBoOl6CnNZBhaVhdBjWE1MSJahjQkA4KEmYH2GUrV66cSYEhYB+AzKBtFiHkQqKiH6Ro1CDCQTWgYQQAs81DU0G/83sAAAAASUVORK5CYII=';
img_dn = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVDhPY2DAAlatWvUfH8amB6vYqEGEg2pgw4iQ7cTKM6xcuXImsYpxqQOZAQ4woIIOCgzrQAl1oEFpZBiWhitFgwx7R4SBIDXYDYGZDFRgTMAwkCHGhBMRJMxwGUa8ITCbli5dKgg08AySN8+AxIhyCboiJMPIN4Qsm6miiYioxltawvSDYogohYTUAQC80UNTOht/YwAAAABJRU5ErkJggg==';
// button id
s+='#play_btn_up { position:fixed; right:0; bottom:53%;z-index:'+zIindex+'; height:36px; width:36px; cursor:pointer; background:url('+img_up+') no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 0 0 5px; margin-top:-24px; }';
s+='#play_btn_dn { position:fixed; right:0; top:53%; z-index:'+zIindex+'; height:36px; width:36px; cursor:pointer; background:url('+img_dn+') no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 0 0 5px; margin-top:-24px; }';
// button class
s+='.play_btn { -webkit-transition-duration:0.5s linear; -o-transition-duration:0.5s linear; -moz-transition-duration:0.5s linear; transition-duration:0.5s linear; opacity:0.65; }';
s+='.play_btn:hover { opacity:1; }';
// append
addStyle(''+s);
} // end of function
// main
function create_btn_element() {
// get scroll
var up, dn,
scrolled,
h = get_scroll('Height');
// exit
if(!h) { return; } // end if
// add css
shareCSS();
// if
if(el){
// create DOM element
up = ce('span');
dn = ce('span');
// set attribute
up.setAttribute('id','play_btn_up');
dn.setAttribute('id','play_btn_dn');
// set class
up.className = "play_btn";
dn.className = "play_btn";
// append element
document.body.appendChild(up);
document.body.appendChild(dn);
// scroll
scrolled = window.pageYOffset || document.documentElement.scrollTop;
// if scroll
up.style.display = (scrolled > 0) ? "" : "none";
// add event over
up.addEventListener('mouseover', move_up, false);
dn.addEventListener('mouseover', move_dn, false);
// add event out
up.addEventListener('mouseout', function(){clearTimeout(t1);},false);
dn.addEventListener('mouseout', function(){clearTimeout(t2);},false);
// add event click
up.addEventListener('click', function(){ scrollTo(el, 0, speed_by_click); }, false);
dn.addEventListener('click', function(){ scrollTo(el, getDocumentHeight(), speed_by_click); }, false);
// add event scroll
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop, diffHeight = document.body.scrollHeight - window.innerHeight;
// if scroll up
up.style.display = (scrolled > 0) ? "" : "none";
// if scroll dn
dn.style.display = (diffHeight > scrolled) ? "" : "none";
}; // end of function
} // end if
} // end of function
// run it
create_btn_element();
Donate for the site OpenUserJS
Are you sure you want to go to an external site to donate a monetary value?
WARNING: Some countries laws may supersede the payment processors policy such as the GDPR and PayPal. While it is highly appreciated to donate, please check with your countries privacy and identity laws regarding privacy of information first. Use at your utmost discretion.