homework/module/scrollButtons/js/scrollButtons.js

function scrollButtons(element, range){
	element.parentElement.style.position = "relative"
	var buttonTop = document.createElement("div");
	var buttonBottom = document.createElement("div");
	var buttonLeft = document.createElement("div");
	var buttonRight = document.createElement("div");

	buttonTop.innerText = "Up";
	buttonBottom.innerText = "Down";
	buttonLeft.innerText = "Left";
	buttonRight.innerText = "Right";

	buttonTop.style.position = "absolute";
	buttonBottom.style.position = "absolute";
	buttonLeft.style.position = "absolute";
	buttonRight.style.position = "absolute";

	buttonTop.style.top = "20px";
	buttonTop.style.left = "180px";

	buttonBottom.style.bottom = "30px";
	buttonBottom.style.left = "170px";

	buttonLeft.style.left = "20px";
	buttonLeft.style.top = "190px";

	buttonRight.style.right = "1000px";
	buttonRight.style.top = "190px";

	buttonTop.style.background = "#fff";
	buttonBottom.style.background = "#fff";
	buttonLeft.style.background = "#fff";
	buttonRight.style.background = "#fff";

	buttonTop.style.borderRadius = "10px"
	buttonBottom.style.borderRadius = "10px"
	buttonLeft.style.borderRadius = "10px"
	buttonRight.style.borderRadius = "10px"

	buttonTop.style.padding = "3px"
	buttonBottom.style.padding = "3px"
	buttonLeft.style.padding = "3px"
	buttonRight.style.padding = "3px"

	element.parentElement.appendChild(buttonTop);
	element.parentElement.appendChild(buttonBottom);
	element.parentElement.appendChild(buttonLeft);
	element.parentElement.appendChild(buttonRight);

	buttonTop.onclick = function(){
		element.scrollTop -= 50;
	}
	buttonBottom.onclick = function(){
		element.scrollTop += 50;
		
	}
	buttonLeft.onclick = function(){
		element.scrollLeft -= 50;
		
	}
	buttonRight.onclick = function(){
		element.scrollLeft += 50;
	}
}

var element = document.getElementById('someId');
scrollButtons(element, 50);