Add 'quick search' input and 'go to top' button for Google
// ==UserScript==
// @name Quick search & Go to Top -- Google
// @namespace feifeihang.info
// @description Add 'quick search' input and 'go to top' button for Google
// @include https://www.google.*
// @include http://www.google.*
// @version 5.1
// @grant none
// ==/UserScript==
(function (window, document, undefined) {
var container = document.createElement('div');
container.style = 'display: none; position: fixed; bottom: 20px;' +
'right: 5px; text-align: right;' +
'width: 280px; height: 60px; z-index: 999999999;' +
'opacity: 0.8;';
container.addEventListener('mouseenter', function () {
this.style.opacity = '1';
}, true);
container.addEventListener('mouseout', function () {
this.style.opacity = '0.8';
}, true);
// create quick query input.
var input = document.createElement('input');
input.tyle = 'text';
input.value = document.querySelector('#lst-ib').value;
input.setAttribute('placeholder', 'Search...');
input.style = 'border: none; border-left: solid #EA4335 5px; flex: 1; display: inline-block; outline: none; height: 40px;' +
'font-size: 15px; margin-top: 10px; margin-bottom: 10px; padding: 0; ' +
'padding-left: 10px; padding-right: 10px; background: #D9D9D9; box-shadow: 0 2px 3px #999999;';
container.appendChild(input);
// bind keypress-enter event.
input.addEventListener('keypress', function (evt) {
if (evt.keyCode === 13) {
var value = input.value.trim() || '';
if (value !== '') {
document.querySelector('#lst-ib').value = value;
document.querySelector('.lsb').click();
}
}
}, false);
// create the goto-top button.
var btn = document.createElement('div');
btn.id = 'goto-top-btn';
btn.innerHTML = 'TOP';
btn.onclick = gotoTop;
// set button CSS style.
btn.style = 'display: inline-block; position: relative; left: -7px; color: #fff; line-height: 60px; text-align: center;' +
'width: 60px; height: 60px; background: #4285F4; box-shadow: 0 2px 3px #999999;' +
'cursor: pointer; font-weight: bolder; border-radius: 100%;';
// append the go-to-top to search form to successfully attach to the UI.
container.appendChild(btn);
var form = document.querySelector('#searchform');
form.appendChild(container);
window.onload = function () {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (top !== 0) {
container.style.display = 'flex';
}
}
// bind button hiden/show event.
window.onscroll = function () {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (top === 0) {
container.style.display = 'none';
} else {
container.style.display = 'flex';
}
}
function gotoTop() {
goto(Math.floor(window.pageYOffset / 5));
}
function goto(step) {
setTimeout(function () {
window.scrollTo(0, window.pageYOffset - step);
if (window.pageYOffset <= 0) return;
goto(step);
}, 100);
}
}) (window, document, undefined);