Voici le code :

HTML

<div id="news">
	
	
	
	<div class="news_scrollup">
		<img src="http://arceusnoobpower.ahst.fr/img/scroll/scrollup.png" alt="Up" onclick="javascript:scrollup()" />
	</div>
	
	<div id="news_body" style="top: 0px;">
		
		<div class="news_titre">
			News Test HTML
		</div>
		<div class="news_contenu">
			Ceci est la première news de test, donc on met du contenu :<br />
			Bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			Bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			Bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
			bla bal lab lba bla bal lab lba bla bal lab lba bla bal lab lba 
		</div>
		<div class="news_infos">
			Fait le XX/XX/XXXX à XX:XX.
		</div>
		
	</div>
	
	<div class="news_scrolldown">
		<img src="http://arceusnoobpower.ahst.fr/img/scroll/scrolldown.png" alt="Down" style="position:relative;top:5px;" onclick="javascript:scrolldown()" />
	</div>
	
</div>

CSS

#news
{
	margin: 10px;
	padding: 0px;
	
	background: #9fe09d;
	border: 5px solid #9fe09d;
	
	overflow: hidden;
	
	height: 500px;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

#news_body
{
	position: relative;
	/*height: 440px;*/
	
	margin: 0px;
	padding: 0px;
	
	background: #d8f2d7;
	
	border-top: 2px solid #9fe09d;
	border-bottom: 2px solid #9fe09d;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	z-index: 10;
}

.news_titre
{
	margin: 0px 0px 0px 0px;
	padding: 3px 5px 3px 5px;
	
	border-top: 3px solid #9fe09d;
	border-bottom: 1px solid #9fe09d;
	
	font-size: 25px;
}
.news_contenu
{
	margin: 0px;
	padding: 7px;
	
	border-bottom: 1px solid #9fe09d;
	
	font-size: 17px;
}
.news_infos
{
	margin: 0px;
	padding: 5px;
	
	font-size: 16px;
	font-style: italic;
	color: #c6d3c6;
	
	border-bottom: 3px solid #9fe09d;
}

.news_scrollup
{
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	
	height: 30px;
	
	margin: 0px;
	padding: 0px;
	
	background: #9fe09d;
	
	text-align: center;
	
	z-index: 20;
}

.news_scrolldown
{
	position: absolute;
	top: 610px;
	left: 25px;
	right: 25px;
	
	height: 30px;
	
	margin: 0px;
	padding: 0px;
	
	background: #9fe09d;
	
	text-align: center;
	
	z-index: 20;
}

Javascript

var scroll_level = 0;

function scrollup () {
	
	if (scroll_level != 0) {
		scroll_level += 10;
	}
	document.getElementById("news_body").setAttribute("style", "top: "+ scroll_level +"px;");
	// alert("scroll_level = "+ scroll_level +";");
}

function scrolldown () {
	
	scroll_level -= 10;
	document.getElementById("news_body").setAttribute("style", "top: "+ scroll_level +"px;");
	// alert("scroll_level = "+ scroll_level +";");
}

Explikassion

Le système de défilement est en Javascript. C'est un système simple.

Coté HTML, on a un grande div qui contient trois div. La première de ces trois div est en haut et prend toute la largeur, sans marge, et contient une image de flèche qui va vers le haut. La dernière des trois div idem que la précédente sauf qu'elle est en bas et a et flèche qui va vers le bas.
La deuxième div est est celle qui a le contenu. Elle la aucune marge et est en position "relative", et on lui met comme attribut style="top:0px".
Côté CSS, on va personnaliser les div. Le plus important est de jouer sûr les z-index des trois div afin de mettre la première et la troisième au dessus de la deuxième. Et la grande div a pour overflow=hidden.

Côté Javascript, on a une variable "var scroll_level" pour l'instant égale a zéro. Puis on a deux fonctions.
La première est pour la flèche du haut est enlève par exemple 10 a la variable puis modifie l'attribut style de la deuxième div qui va donc monter.
La deuxième fonction consiste en l'inverse.

J'espère avoir été clair.