bind mousewheel to scroll div
===

Ok so I've been searching google on ways to bind the mousewheel scroll to a div using jQuery and can't seem to find a solution that's worked for me. I'm hoping someone here could please give me a hand in figuring this out.. 

I have several lines of content within this div tag `<div id="scroller" class="scroller"> ... </div>`.

I'm wondering if there is a somewhat simple method using jQuery to enable the mouse wheel when I hover over the div, so that I can scroll the content up and down.

Any help or insight is appreciated, Thanks in advance.


     $(function() {

    $('.collapse_content a').on('click', function(e){
    $('.collapse_content a').removeClass('selected');
    $(this).addClass('selected');
    });
  
     //toggle the componenet with class collapse_tab
    $(".collapse_tab").click(function() {
      $(this).next(".collapse_content").slideToggle(500);
    });
  

    $('.scroller').bind('mousewheel', function(e){
   
    });	
    });

My html is -

    <div class="scrollup">&nbsp;</div>

    <div id="scroller" class="scroller">

    <div class="collapse_tab">Group 1</div>
        <div class="collapse_content">
            <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a>
            <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a>
            <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a>
            <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a>
        </div>

    <div class="collapse_tab">Group 2</div>
        <div class="collapse_content">
            <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a>
            <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a>
            <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a>
            <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a>
        </div>

    <div class="collapse_tab">Group 3</div>
        <div class="collapse_content">
            <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a>
            <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a>
            <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a>
            <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a>
        </div>

    <div class="collapse_tab">Group 4</div>
        <div class="collapse_content">
            <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a>
            <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a>
            <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a>
            <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a>
        </div>
    </div>

     <div class="scrolldown">&nbsp;</div>