☰

Go to Top -- Google

Add a 'go to top' button to Google

当前为 2015-09-03 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Go to Top -- Google
// @namespace   feifeihang.info
// @description Add a 'go to top' button to Google
// @include     https://www.google.*
// @include     http://www.google.*
// @version     1
// @grant       none
// ==/UserScript==
(function (window, document, undefined) {
  // create the goto-top button.
  var btn = document.createElement('div');
  btn.id = 'goto-top-btn';
  btn.innerHTML = 'TOP';
  btn.onclick = gotoTop;
  
  // set CSS style.
  btn.style = 'display: none; color: #fff; position: fixed; bottom: 10px;' +
              'right: 10px; line-height: 40px; text-align: center;' +
              'width: 40px; height: 40px; background: #4285F4;' +
              'cursor: pointer; font-weight: bolder; opacity: 0.8;';
  
  // append the go-to-top to search form to successfully attach to the UI.
  var form = document.querySelector('#searchform');
  form.appendChild(btn);
  
  window.onload = function () {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    if (top !== 0) {
      btn.style.display = 'block';
    }
  }
  
  // bind button hiden/show event.
  window.onscroll = function() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    if (top === 0) {
      btn.style.display = 'none';
    } else {
      btn.style.display = 'block';
    }
  }
  
  function gotoTop() {
    window.scrollTo(0, 0);
  }
})(window, document, undefined);