/*
*------------------------------------------------------------------------------
* @script UpDown scroll widget
*------------------------------------------------------------------------------
* @copyright Copyright (C) 2016 Denius.biz. All Rights Reserved.
* @author Denius [get@denius.biz]
* @link: http://denius.biz/
*------------------------------------------------------------------------------
*/
/* Inject my widget to HTML */
document.write("<a data-a='0' onclick='updown();' id='go'>▲ Наверх</a>");
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#go{cursor:pointer;font:13px Tahoma;color:#e1e7ed;padding-left:10px;position:fixed;top:0;left:0;height:100%;width:80px;}#go:hover{background-color:rgba(251, 251, 252, 0.5);color:#45688E;}';
document.getElementsByTagName('head')[0].appendChild(style);
/* Widget body */
function updown() {
var go = document.getElementById("go");
var a = go.getAttribute("data-a");
var b = window.pageYOffset;
go.setAttribute("data-a", b);
var up = "▲ Наверх";
var down = "▼";
var text = go.innerHTML;
if (text == up) {
go.innerHTML = down;
function Goup() {
window.scrollBy(0,-100);
if (window.pageYOffset > 0) {requestAnimationFrame(Goup);}
}
Goup();
} else {
go.innerHTML = up;
function Godown() {
window.scrollBy(0, 150);
if (window.pageYOffset < a) {requestAnimationFrame(Godown);}
}
Godown();
}
}
Save to file updown.js
Include to head
Include to head
2 Responses
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.