☰

Scroll to Bottom or Top

为网页增加滚到页首和页尾的按钮

  1. // ==UserScript==
  2. // @name	Scroll to Bottom or Top
  3. // @author	midpoint
  4. // @description	为网页增加滚到页首和页尾的按钮
  5. // @version     2014.9.21
  6. // @include     *
  7. // @exclude     http://*facebook.com*
  8. // @exclude     https://*facebook.com*
  9. // @namespace https://greatest.deepsurf.us/users/5506
  10. // ==/UserScript==
  11.  
  12. //top button
  13. var a = document.createElement('span');
  14. var c = 'opacity:0.5;-moz-transition-duration:0.2s;-webkit-transition-duration:0.2s;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUBAMAAAByuXB5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAbUExURf///6qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpshoL4AAAAIdFJOUwARM2aImczuGAB4owAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAEZJREFUGNNj6IABBgQLB2BME4CyxDoSIQymio52BTBLHaixCMRgrgCy2g2ALAuwac0MDCxQgx0YIqCsVhTbOIBUA9gUslkA7dcxR/3Xli8AAAAASUVORK5CYII=") no-repeat scroll 50% 50% rgba(0, 152, 255, 1);border-radius:0px 0px 0px 0px;cursor:pointer;position:fixed;bottom:50%;width:36px;height:36px;right:10px;z-index:9999';
  15. a.style.cssText = c; 
  16. a.addEventListener('mouseover', function(){ a.style.opacity = 1;}, false);
  17. a.addEventListener('mouseout', function(){ a.style.opacity = 0.5; }, false);
  18. a.addEventListener('click', function(){ window.scrollTo(0,0); }, false);
  19. //a.addEventListener('click', function(){ $("html,body").animate({scrollTop:"0px"},200); }, false );
  20. document.body.appendChild(a);
  21.  
  22. //bottom button
  23. var newHeight = document.body.scrollHeight;
  24. var b = document.createElement('span');
  25. var d = 'opacity:0.5;-moz-transition-duration:0.2s;-webkit-transition-duration:0.2s;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUBAMAAAByuXB5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAbUExURf///6qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpshoL4AAAAIdFJOUwARM2aImczuGAB4owAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAE1JREFUGNNjYGDg6OjoaGAAAfJZHTDAEAFltDKwQFkODAwWYEYzUCFzBZDRbgDSqw5kFYFNYaroaFcAsxjEOhIhDAbGNAEGHABhG5wFAH6qMUfw6SaOAAAAAElFTkSuQmCC") no-repeat scroll 50% 50% rgba(0, 152, 255, 1);border-radius:0px 0px 0px 0px;cursor:pointer;position:fixed;bottom:45%;width:36px;height:36px;right:10px;z-index:9999';//top:52%;
  26. b.style.cssText = d;   
  27. b.addEventListener('mouseover', function(){ b.style.opacity = 1; }, false);
  28. b.addEventListener('mouseout', function(){ b.style.opacity = 0.5; }, false);
  29. b.addEventListener('click', function(){ window.scrollTo(0,newHeight); }, false);
  30. document.body.appendChild(b);
  31.  
  32. //http://file.ithome.com/js/common.js
  33. var lastScrollY=0;
  34. (function gotop(){
  35. 	var diffY;
  36.         diffY = document.documentElement.scrollTop+document.body.scrollTop;
  37. 	percent=.1*(diffY-lastScrollY);
  38. 	if(percent>0)percent=Math.ceil(percent);
  39. 	else percent=Math.floor(percent);
  40. 	lastScrollY=lastScrollY+percent;
  41. 	if(lastScrollY>100){
  42. 	a.style.display="block";b.style.display="block";
  43. 	} else {
  44.         b.style.display="block";a.style.display="none";
  45. 	}
  46.         setTimeout(gotop,1);
  47. })();
  48.  
  49.  
  50.