Как реализовать прокрутку на сайте?

[Ellantra]

Как сделать , чтобы при нажатии мышкой на ползунок, он перемещался, и соответственно прокручивалось содержимое?Вот скрин, как всё должно выглядеть http://clip2net.com/s/1AYQY

<div id="slider">
<div class="line"></div>
<h2>Бренды</h2>
<div class="up"><a href="#"><img src="/i/up.png"></a></div>
<!--<div class="jspVerticalBar"><div class="jspCap jspCapTop"></div><div class="jspTrack" style="height: 302px; "><div class="jspDrag" style="height: 12px; top: 0; "><div class="jspDragTop"></div><div class="jspDragBottom"></div></div></div><div class="jspCap jspCapBottom"></div></div>
-->
<div class="prokrutka">
<div class="polzunok"><a id="scrollSlider" href="#"><img src="/i/polzunok.png"></a></div>
</div>

<ul id="scrollbody">
<li><a href="#"><img src="/i/brand_1.png"></a></li>
<li><a href="#"><img src="/i/brand_2.png"></a></li>
<li><a href="#"><img src="/i/brand_3.png"></a></li>
<li><a href="#"><img src="/i/brand_4.png"></a></li>
<li><a href="#"><img src="/i/brand_5.png"></a></li>
<li><a href="#"><img src="/i/brand_6.png"></a></li>
<li><a href="#"><img src="/i/brand_1.png"></a></li>
<li><a href="#"><img src="/i/brand_2.png"></a></li>
<li><a href="#"><img src="/i/brand_3.png"></a></li>
<li><a href="#"><img src="/i/brand_4.png"></a></li>
<li><a href="#"><img src="/i/brand_5.png"></a></li>
<li><a href="#"><img src="/i/brand_6.png"></a></li>
<li><a href="#"><img src="/i/brand_1.png"></a></li>
<li><a href="#"><img src="/i/brand_2.png"></a></li>
<li><a href="#"><img src="/i/brand_3.png"></a></li>
<li><a href="#"><img src="/i/brand_4.png"></a></li>
<li><a href="#"><img src="/i/brand_5.png"></a></li>
<li><a href="#"><img src="/i/brand_6.png"></a></li>
</ul>
<div class="down"><a href="#"><img src="/i/down.png"></a></div>
</div>

#content .main #auto #slider {
	padding: 0;
  margin: 0 5px 0 0;
  background: url('/i/rightmenu.png') 0 0 no-repeat;
  width: 196px;
  height: 473px;
  position: relative;
  overflow: hidden;
  float: right;
  clear: right;
  text-align: center;
}
#content .main #auto #slider .line {
	padding: 0;
  margin: 0;
  width: 155px;
  height: 1px;
  position: absolute;
  top: 50px;
  left: 20px;
  background: #4b4b4b;
}
#content .main #auto #slider h2 {
	padding: 22px 55px 0 51px;
  margin: 0;
  color: #4b4b4b;
  font-size: 13px;
}
#content .main #auto #slider .up {
	padding: 35px 0 0 0;
  margin: 0;
}
#content .main #auto #slider ul {
	padding: 22px 0 0 0;
  margin: 0;
  height: 278px;
  overflow: hidden;
}
#content .main #auto #slider ul li {
	padding: 0 0 18px 0;
  margin: 0;
}
#content .main #auto #slider .down {
	padding: 10px 0 35px 0;
  margin: 0;
}
#content .main #auto #slider .prokrutka {
	padding: 0;
  margin: 0;
  position: absolute;
  background: url('/i/prokrutka.png') no-repeat;
  width: 8px;
  height: 302px;
  left: 170px;
}
#content .main #auto #slider .prokrutka .polzunok a {
  position: absolute;
  left: 0;
  top: 100px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  height: 11px;
  width: 11px;
}
#content .main #auto #slider .prokrutka .polzunok a img {
	padding: 0 0 0 0;
  margin: 0 0 0 -1px;
  height: 11px;
  width: 11px;
}