|
Правка скрипта (кнопки вверх-вниз)
#39139388
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Сейчас у кнопок позиция такая - bottom-right.
И если не используются, то уезжают вправо. Хочется, чтобы они имели позицию - bottom и также уезжали вниз.
ПС. Скрипт не мой, разработчика просил, не отвечает уже давно.
-Скрипт
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
// ==UserScript==
// @name Lite Add button for Smooth Scroll to the top / bottom
// @author burningall
// @description 为页面添加按钮，平滑的滚动到顶部/底部
// @version 2015.8.17
// @include *
// @grant GM_addStyle
// @run-at document-start
// @compatible chrome 完美支持
// @compatible firefox 完美支持
// @license The MIT License (MIT); http://opensource.org/licenses/MIT
// @supportURL http://www.burningall.com
// @contributionURL troy450409405@gmail.com|alipay.com
// @namespace https://greasyfork.org/zh-CN/users/3400-axetroy
// ==/UserScript==
//
//
//
//=======快捷键======
//alt+1>>>>>>回到顶部
//alt+2>>>>>>去到底部
//================公共函数区============
(function(window,document){
function addEvent(obj, type, fn){
return obj.addEventListener ?
obj.addEventListener(type, function(e){
var ev = window.event ? window.event : (e ? e : null);
ev.target = ev.target || ev.srcElement;
if( fn.call(obj,ev)===false ){//回掉函数为false，则阻止默认时间
e.cancelBubble = true;//阻止冒泡
e.preventDefault();//chrome，firefox下阻止默认事件
}
}, false)
:
obj.attachEvent('on' + type, function(e){
//fn.call(obj,e);//解决IE8下，this是window的问题
var ev = window.event ? window.event : (e ? e : null);
ev.target = ev.target || ev.srcElement;
if(fn.call(obj,ev)===false ){
e.cancelBubble = true;//阻止冒泡
return false;//阻止默认事件，针对IE8
}
});
}
function getSize(obj) {
return document.documentElement[obj] !== 0 ? document.documentElement[obj] : document.body[obj];
}
function hasScroll() {
return getSize('scrollHeight') > getSize('clientHeight') ? true : false;
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
function $(id) {
return document.getElementById(id);
}
function animate(obj,json,cfgjson){
clearInterval(obj.animate);
obj.animate = setInterval(function() {
var bStop = true;//判断运动是否停止
for(var attr in json){//attr代表属性,'width','height'.而json[attr]代表数值
// 1. 取得当前的值（可以是width，height，opacity等的值）
var objAttr = 0 ;
if(attr == 'opacity'){ //当前值
objAttr = Math.round(parseFloat( getStyle(obj,attr) ) * 100);
}else if( attr=="scrollTop" ){
objAttr = parseInt( getSize("scrollTop") );
}
else{
objAttr = parseInt( getStyle(obj,attr) );
}
// 2.计算运动速度
var jsonattr = parseFloat( json[attr] );//目标值
var speedConfig = (cfgjson && typeof ( cfgjson.speed ) != 'undefined') ? cfgjson.speed : 10;
var iSpeed = (jsonattr - objAttr) / speedConfig; //(目标数值-当前数值)/10
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //如果速度>0，则速度向上取整，如果小于0，则保留小数
// 3. 检测所有运动是否到达目标
//objAttr,当前点，json[attr]为目标点
if ( (iSpeed>0 && objAttr <= jsonattr) || (iSpeed<0 && objAttr >= jsonattr) ) {//如果有其中一项没有达到目标
bStop = false;
}
if (attr == "opacity") {
obj.style.filter = 'alpha(opacity:' + (objAttr + iSpeed) + ')';
obj.style.opacity = (objAttr + iSpeed) / 100;
}else if(attr == "scrollTop"){
document.documentElement.scrollTop=document.body.scrollTop = objAttr+iSpeed;
}
else {
obj.style[attr] = objAttr + iSpeed + 'px'; //赋值开始运动
}
if (bStop) { // 表示所有运动都到达目标值
clearInterval(obj.animate);
if( cfgjson && typeof cfgjson.endFn != 'undefined' ){
cfgjson.endFn.call(obj);
}
}
}//for
},20);
}
//================样式区============
var cssText = '#scrollMars-troy{position:fixed;right:30px;z-index:9999999}#scrollMars-troy #mars-point{width:100px;height:100px;position:absolute;top:0;left:-40px}#scrollMars-troy div div.sroll-btn-troy{width:35px;height:35px;text-align:center;background:transparent;color:#000;text-shadow:0 0 3px #000;display:block;opacity:0.8;filter:alpha(opacity=80);cursor:pointer;border-radius:15%;line-height:35px;font-size:25px;font-style:inherit;font-weight:bold;font-family:"宋体"}#scrollMars-troy div div.sroll-btn-troy:hover{background:#9acd32}';
GM_addStyle(cssText);
//================主要代码区============
function scroll(dir) { //obj随意，dir>0往上滚，dir<0往下滚
var position,speed,scrollTop,scrollHeight,clientHeight;
clearInterval(document.timerScroll);
scrollHeight = getSize('scrollHeight');
clientHeight = getSize('clientHeight');
document.timerScroll = setInterval(function() {
scrollTop = getSize('scrollTop');
if (dir > 0) { //往上滚动
speed = ( scrollTop/10 ) + 1;
position = scrollTop - speed;
if (position <= 0) { //如果滚到顶部
document.body.scrollTop = document.documentElement.scrollTop = 0;
clearInterval(document.timerScroll);
}
} else { //往下滚动
speed = ( (scrollHeight-scrollTop-clientHeight) / 10 ) + 1;
position = scrollTop + speed;
if (position + clientHeight >= scrollHeight) { //如果滚到底部
document.body.scrollTop = document.documentElement.scrollTop = scrollHeight;
clearInterval(document.timerScroll);
}
}
document.body.scrollTop = document.documentElement.scrollTop = position;
}, 20);
}
function marsMove(dir){
var mars = $('scrollMars-troy');
var point = $('mars-point');
if(dir=="moveIn"){//移入
clearTimeout(mars.timerHover);
animate(mars,{"right":"10","opacity":"100"});
animate(point,{"left":"0"});
}else if(dir=="moveOut"){//移出
clearTimeout(mars.timerHover);
mars.timerHover = setTimeout(function(){
animate(mars,{"right":"-10","opacity":"20"});
animate(point,{"left":"-20"});
},3000);
}
}
function init() {
var scrollBtn = $("scrollMars-troy");
if( scrollBtn ){
scrollBtn.style.top = (getSize('clientHeight') / 3) + 'px';
}
if (hasScroll() === true && !scrollBtn) { //如果有滚动条，并且没有按钮
var mars = document.createElement('div'),goTop,goBtm,point;
mars.id = "scrollMars-troy";
window.top.document.documentElement.appendChild(mars);
mars.innerHTML =
'<div id=\'mars-point\'></div>'+
'<div>'+
' <div id=\'goTop-troy\' title=\'返回顶部\' class=\'sroll-btn-troy\'></div>'+
' <div id=\'goBtm-troy\' title=\'去到底部\' class=\'sroll-btn-troy\'></div>'+
'</div>';
goTop = $("goTop-troy");
goBtm = $("goBtm-troy");
goTop.innerHTML = "↑";
goBtm.innerHTML = "↓";
$('scrollMars-troy').style.top = (getSize('clientHeight') / 1.15) + 'px';
addEvent(goTop, "click", function() {
scroll(1);
return false;
});
addEvent(goBtm, "click", function() {
scroll(-1);
return false;
});
addEvent(mars,'mouseover',function(){
marsMove("moveIn");
return false;
});
addEvent(mars,'mouseout',function(){
marsMove("moveOut");
return false;
});
addEvent(mars,'mousedown',function(){
return false;
});
marsMove("moveOut");
}
}
//================执行区============
addEvent(window,"mousewheel",function(){
clearInterval(document.timerScroll);
});
addEvent(window,"DOMMouseScroll",function(){
clearInterval(document.timerScroll);
});
addEvent(window.top, "resize", function() { //页面大小改变，初始化按钮
init();
});
addEvent(document, 'DOMContentLoaded', function() {
init();
});
//================快捷键区============
addEvent(window, 'keydown', function(e) {
if (e.altKey && e.keyCode == 49) { //alt+1，向上滚动
scroll(1);
} else if (e.altKey && e.keyCode == 50) { //alt+2，向下滚动
scroll(-1);
} else if (e.ctrlKey && e.altKey) { //ctrl+alt,调出按钮
marsMove("moveIn");
}
});//监听keydown，快捷键
})(window,document);
|
|
|
