<body>
	<div id="wrapper">
		<div id="content">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>
	</div>

	<div id="scroll-top-button" class="scroll-buttons">вверх</div>
	<div id="scroll-bottom-button" class="scroll-buttons">вниз</div>
	<div id="scroll-left-button" class="scroll-buttons">влево</div>
	<div id="scroll-right-button" class="scroll-buttons">вправо</div>

</body>
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #444;
}

#wrapper {
	width: 300px;
	height: 120px;
	background: #fff;
	overflow: scroll;
}

#content {
	width: 400px;
	height: 300px;
	background: #888;
}

.scroll-buttons {
	background: #fff;
	color: #333;
	cursor: pointer;
	display:inline-block;
	padding: 0 10px;
	border-radius: 10px;
	margin: 4px;
}
function scrollArrows(horizontal, vertical) {
	document.querySelector("#wrapper").scrollBy(horizontal,vertical);
}

document.querySelector('#scroll-top-button').onclick = function() {
	scrollArrows(0, -15);
}

document.querySelector('#scroll-bottom-button').onclick = function() {
	scrollArrows(0, 15);
}

document.querySelector('#scroll-left-button').onclick = function() {
	scrollArrows(-15, 0);
}

document.querySelector('#scroll-right-button').onclick = function() {
	scrollArrows(15, 0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.