☰

平滑的滚动到顶部/底部

为网页增加滚到顶部和底部按钮

As of 2015-03-23. See the latest version.

  1. // ==UserScript==
  2. // @name	平滑的滚动到顶部/底部
  3. // @author	burningall
  4. // @description	为网页增加滚到顶部和底部按钮
  5. // @version     2015.3.23-2.0
  6. // @include			http://*
  7. // @include			https://*
  8. // @include			ftp://*
  9. // @supportURL		http://www.burningall.com
  10. // @contributionURL	troy450409405@gmail.com|alipay.com
  11. // @namespace https://greatest.deepsurf.us/zh-CN/users/3400-axetroy
  12. // ==/UserScript==
  13.  
  14. //绑定事件函数
  15. //使用方法：addEvent(ovj,'event',function(){})
  16. function addEvent(obj,event,fn){
  17. 	return obj.addEventListener ? obj.addEventListener(event,fn,false) : obj.attachEventListener('on'+event,fn);
  18. }
  19. 	  (addEvent(window,'load',function(){
  20. //元素ID选择
  21. //使用方法：$('id')
  22. function $(id){
  23. 	return document.getElementById(id)
  24. 	}
  25. //获取元素的属性/样式
  26. //使用方法getStyle(对象，"属性")，像素带px
  27. //parseInt(getStyle($("scrollMars"),"width"))获取不带px的数据
  28. function getStyle(obj,attr){
  29. 	return obj.currentStyle ? obj.currentStyle[attr]  :getComputedStyle(obj)[attr];
  30. 	}
  31.  
  32. //获取滚动条位置
  33. function getScrollTop(){
  34. 	return document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
  35. 	}
  36. //获取浏览器可见的窗口高度
  37. function getClientHeight(){
  38. 	return document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight
  39. }
  40. //获取文档总高度
  41. //scrollTop + clientHeight == scrollHeight
  42. //滚动条高度+浏览器可是区域高度=文档总高度
  43. function getScrollHeight(){
  44. 	return document.body ? 　bodyScrollHeight = document.body.scrollHeight : document.documentElement.scrollHeight;
  45. }
  46. //创建元素
  47. //使用方法 createElement("div","demo","width:500px;height:500px",document.documentElement)
  48. function createElement(tagName,idName,styleList,appendPosition){
  49. 	var newElement = document.createElement(tagName);//创建元素的标签命
  50. 	newElement.id=idName;//设置元素的属性
  51. 	newElement.style.cssText=styleList;//设置元素样式
  52. 	appendPosition.appendChild(newElement);//插入元素
  53. 	}
  54. //元素的属性变化/移动
  55. //使用方法doMove(obj,"left",20,800),对象，属性，速度，目标点
  56. function doMove(obj,attr,dir,target,endFn){
  57. 	dir=parseInt(getStyle(obj,attr))<target ? dir : -dir;	//对于方向矫正
  58. 	clearInterval(obj.timer)
  59. 	obj.timer=setInterval(function(){
  60. 		var speed=parseInt(getStyle(obj,attr))+dir	//步长
  61. 		if(speed>target&&dir>0 || speed<target&&dir<0){	//判断往前或往后
  62. 			speed=target
  63. 			}
  64. 		obj.style[attr]=speed+"px"	//赋值
  65. 		if(speed==target){
  66. 			clearInterval(obj.timer)
  67. 			endFn &&endFn()	//回掉函数
  68. 			}
  69. 		},30)
  70. 	}
  71. 	//创建滚动按钮
  72. 	createElement("div", "scrollMars", "width:100px;height:120px;position:fixed;right:20px;top:200px", document.documentElement);	
  73. 	scrollMars.innerHTML = "<div id='goTop' class='Top-and-Btn'></div>" + "<div id='goBtn' class='Top-and-Btn'></div>";
  74. 	var scrollStyle = "width:40px;height:40px;text-align:center;padding:5px;margin:5px auto;background:#303030;color:#fff;display:block;opacity:0.8;fitter:alpha(opacity:80);cursor:pointer;border-radius:50%;box-shadow:2px 2px 40px 2px #303030;";
  75. 	$('goTop').style.cssText = scrollStyle;
  76. 	$('goBtn').style.cssText = scrollStyle;
  77. 	$('goTop').innerHTML = "顶" + "<br/>" + "部";
  78. 	$('goBtn').innerHTML = "底" + "<br/>" + "部";
  79. 	//向上滚动
  80. 	addEvent($("goTop"), 'click',
  81. 	function() {
  82. 		clearInterval($("goTop").timer);
  83. 		$("goTop").timer = setInterval(function() {
  84. 			var speed = (getScrollTop() / 5) + 10;
  85. 			position = getScrollTop() - speed;
  86. 			if (position <= 0) {
  87. 				document.body.scrollTop = document.documentElement.scrollTop = 0;
  88. 				clearInterval($("goTop").timer);
  89. 				$("goTop").timer=null;
  90. 			}
  91. 			document.body.scrollTop = document.documentElement.scrollTop = position;
  92. 		},
  93. 		30)
  94. 	})
  95. 	//向下滚动
  96. 	addEvent($("goBtn"), 'click',
  97. 	function() {
  98. 		clearInterval($("goTop").timer);
  99. 		$("goTop").timer = setInterval(function() {
  100. 			var speed = (getScrollTop() / 5) + 10;
  101. 			position = getScrollTop() + speed;
  102. 			if (position + getClientHeight() >= getScrollHeight()) {
  103. 				document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
  104. 				clearInterval($("goTop").timer);
  105. 				$("goTop").timer=null;
  106. 			}
  107. 			document.body.scrollTop = document.documentElement.scrollTop = position;
  108. 		},
  109. 		30)
  110. 	})
  111. 	//鼠标移入与移出
  112. 	addEvent($("scrollMars"), 'mouseover',
  113. 	function() { //鼠标移入
  114. 		doMove($("scrollMars"), 'right', 10, 20,
  115. 		function() {
  116. 			doMove($("scrollMars"), 'width', 20, 100)
  117. 		})
  118. 	});
  119. 	addEvent($("scrollMars"), 'mouseout',
  120. 	function() { //鼠标移出
  121. 		doMove($("scrollMars"), 'right', 10, -80,
  122. 		function() {
  123. 			doMove($("scrollMars"), 'width', 20, 160)
  124. 		})
  125. 	})
  126. 	addEvent($("goTop"), 'mouseover',function(){$("goTop").style.background = "#FF0004";})
  127. 	addEvent($("goTop"), 'mouseout',function(){$("goTop").style.background = "#303030";})
  128. 	addEvent($("goBtn"), 'mouseover',function(){$("goBtn").style.background = "#FF0004";})
  129. 	addEvent($("goBtn"), 'mouseout',function(){$("goBtn").style.background = "#303030";})
  130. 		
  131. }))