FilesExpand file tree

 master

/

GoTop.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

142 lines (135 loc) · 4.55 KB

 master

/

GoTop.js

Copy path

Top

File metadata and controls

• Code
• Blame

142 lines (135 loc) · 4.55 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

/**

* 页面滚动条不是在最顶端时 页面出现top按钮，点击回到最顶端,按钮隐藏

*

* 使用 直接引入 <script src="./js/GoTop.js" id="js_gotop"></script>

*/

(function() {

//获取当前js路径 然后处理图片路径 即绝对路径 （避免在多处引用图片路径不对）

var path = document.getElementById('js_gotop').src;

path_out = path.replace("js/GoTop.js","images/gotop_out.png");

path_over = path.replace("js/GoTop.js","images/gotop_over.png");

// html 元素

var div = document.createElement('div');

div.id = "gotop";

div.onmouseout = function(e){this.firstChild.src = path_out};

div.onmouseover = function(e){this.firstChild.src = path_over};

div.setAttribute("style","display:'';position:fixed;width:30px;height:30px;bottom:50px;right:50px;opacity:0;margin: 20px");

document.body.appendChild(div);

var inner = '<img border=0 src='+'"'+path_out+'"'+'>';

document.getElementById('gotop').innerHTML = inner;

//屏幕滚动 元素淡入淡出 参数设置

window.onscroll = function() {

getScrollTop() > 0 ? fadein(div,100,1000,5): fadeout(div,0,1000,5);

};

//元素点击事件

div.onclick = function() {

var goTop = setInterval(scrollMove, 10);

function scrollMove() {

setScrollTop(getScrollTop() / 1.1);

if (getScrollTop() < 1) clearInterval(goTop);

}

};

/**

* 获取滚动条的高度

*

* @returns {number} 滚动条高度

*/

function getScrollTop() {

return document.documentElement.scrollTop + document.body.scrollTop;

}

/**

* 设置滚动条的值

*

* @param value

*/

function setScrollTop(value) {

if (document.documentElement.scrollTop) {

document.documentElement.scrollTop = value;

} else {

document.body.scrollTop = value;

}

}

/**

* 元素透明度设置 浏览器兼容

*

* @param element 元素

* @param opacity 透明度 0·100 正整数

*/

function setOpacity(element,opacity){

//兼容firfox Chrome 和新版的IE

if(element.style.opacity !== undefined)

{

element.style.opacity = opacity/100;

}

else {

element.style.filter = "alpha(opacity = "+ opacity +")"; //兼容老版的IE

}

}

/**

* 淡入

*

* @param element 元素

* @param opacity 最终透明度 0`100 正整数

* @param time 总共时间 单位 毫秒

* @param value 每次变化值 0`100 正整数

*/

function fadein(element, opacity,time,value){

if(element){

//获取当前的透明度

var v = element.style.opacity || element.style.filter.replace("alpha(opacity=","").replace(")","");

v = v > 1 ? v*1 : v*100;

//变化透明度

var changeopacity = opacity - v;

if(changeopacity <= 0) return;

//元素可见

element.style.display = "";

//变化次数

var count = changeopacity/value;

//变化时间间隔

var speed = time/count;

var timer = null;

timer = setInterval(function(){

if(v<opacity) {

v +=value;

setOpacity(element,v);

}

else{

clearInterval(timer);

}

},speed);

}

}

/**

* 淡出

*

* @param element 元素

* @param opacity 最终透明度 0`100 正整数

* @param time 总共时间 单位 毫秒

* @param value 每次变化值 0`100 正整数

*/

function fadeout(element,opacity,time,value){

if(element){

//获取当前的透明度

var v = element.style.filter.replace("alpha(opacity=","").replace(")","") || element.style.opacity || 100;

v = v > 1 ? v*1 : v*100;

//变化透明度

var changeopacity = v - opacity;

if(changeopacity <= 0) return;

//变化次数

var count = changeopacity/value;

//变化时间间隔

var speed = time/count;

var timer = null;

timer = setInterval(function(){

if((v-value) >= opacity){

v -= value;

setOpacity(element,v);

}

else {

clearInterval(timer);

element.style.display = "none";

}

},speed)

}

}

})();