User:Spas.Z.Spasov/scroll-up-and-down-feature.js

/**
 * Scroll Up and Down Feature
 * [single] and [double] mouse click, also [Ctrl]+[Arrows] are available
 * 
 * @author Spas Zdravkov Spasov <spas.z.spasov@gmail.com> (c) 2019
**/

// Load font Awesome
// An optional way to use an Awesome icon: https://meta.wikimedia.org/wiki/User:Spas.Z.Spasov/global.js
/**
if(!document.getElementById('FontAwesome')) {
	var link = document.createElement('link');
	link.id = 'FontAwesome';
	link.href = 'https://use.fontawesome.com/releases/v5.8.2/css/all.css';
	link.rel = 'stylesheet';
	link.integrity = 'sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay';
	link.crossOrigin = 'anonymous';
	document.head.appendChild(link);
}
**/

// Create the buttons
if(!document.getElementById('goUpDownContainer')) {
	var goUpButton = document.createElement("button");
	//goUpButton.innerHTML = '<i class="fas fa-angle-up"></i>';
	goUpButton.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="angle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-angle-up fa-w-10 fa-3x"><path fill="currentColor" d="M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" class=""></path></svg>';
	goUpButton.id = "goUpButton";
	goUpButton.onclick = function(e) { click_up(); };
	goUpButton.ondblclick = function(e) { click_up_2(); };
	goUpButton.id = "goUpButton";
	goUpButton.onclick = function(e) { click_up(); };
	goUpButton.ondblclick = function(e) { click_up_2(); };

	var goDownButton = document.createElement("button");
	//goDownButton.innerHTML = '<i class="fas fa-angle-down"></i>';
	goDownButton.innerHTML = '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-angle-down fa-w-10 fa-3x"><path fill="currentColor" d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z" class=""></path></svg>';
	goDownButton.id = "goDownButton";
	goDownButton.onclick = function(e) { click_down(); };
	goDownButton.ondblclick = function(e) { click_down_2(); };

	var goUpDownContainer = document.createElement("div");
	goUpDownContainer.id = "goUpDownContainer";
	
	var body = document.getElementsByTagName("body")[0];
	
	body.appendChild(goUpDownContainer);
	document.getElementById("goUpDownContainer").appendChild(goUpButton);
	document.getElementById("goUpDownContainer").appendChild(goDownButton);
}

// On Scroll action: when the user scrolls down 20px from the top of the document, show the button
$(window).scroll(function() {
	if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
		//document.getElementById("goUpDownContainer").style.display = "block";
		$('#goUpDownContainer').slideDown();
	} else {
		//document.getElementById("goUpDownContainer").style.display = "none";
		$('#goUpDownContainer').slideUp();
	}	
});

// On Click actions
function click_up() {
	var height = window.innerHeight;
	var correction;
	
	if ( height < 480 ) {
		correction = Math.round(height * 3 / 100);
	} else if ( height < 768 ) {
		correction = Math.round(height * 4 / 100);
	} else {
		correction = Math.round(height * 5 / 100);
	}
	
	document.body.scrollTop -= height - correction;
	document.documentElement.scrollTop -= height - correction;
}


function click_up_2() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
}

function click_down() {
	var height = window.innerHeight;
	var correction;
	
	if ( height < 480 ) {
		correction = Math.round(height * 3 / 100);
	} else if ( height < 768 ) {
		correction = Math.round(height * 4 / 100);
	} else {
		correction = Math.round(height * 5 / 100);
	}
	
	document.body.scrollTop += height - correction;
	document.documentElement.scrollTop += height - correction;
}

function click_down_2() {
	var body = document.body;
	var html = document.documentElement;
	var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
	
	document.body.scrollTop += height;
	document.documentElement.scrollTop += height;
}

/**
 * Тази част служи за извикване на 4-те основни функции чрез клавиатурата - към момента е изключена.
 * 
document.onkeydown = function (e) {
	e = e || window.event;
	var keyCode = e.keyCode || e.which,
	arrow = {left: 37, up: 38, right: 39, down: 40 };

	if (e.ctrlKey) {
    	switch (keyCode) {
    		case arrow.left:
				click_up();
    			break;
    		case arrow.right:
				click_down();
    			break;
    		case arrow.up:
				click_up_2();
    			break;
    		case arrow.down:
				click_down_2();
    			break;
    	}
	}
}
**/