将命名锚添加到jquery水平滑块

Question

我使用水平滑块脚本在单个页面中导航10张幻灯片，我想为每张幻灯片添加命名锚点，以便我可以从css下拉菜单导航到给定的幻灯片。

以下是我页面上的脚本：

    $(function(){
        if (self.location.href == top.location.href){
            $("body").css({'z-index':'1', font:"normal 10px/13px 'trebuchet MS', verdana, sans-serif"});
            var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' style='display:none;'></a>");
            $("#logo").fadeIn();
        }

        $("#myScroll").mbScrollable ({
            width:940,
            elementsInPage:1,
            elementMargin:2,
            shadow:"",
            height:"510",
            controls:"#controls",
            slideTimer:1000,
            autoscroll:false,
            scrollTimer:3000
        });

        setTimeout(function(){$("#wrapper").fadeIn();},100);
    });
</script>

以下是HTML：

<div id="wrapper">
     <div id="myScroll" align="left">
        <div class="subtitles" style="background-color:#FFFFFF">About Acoustic Hailing Devices</div>
        <div class="subtitles" style="background-color:#FFFFFF">Anti-Piracy</div>
        <div class="subtitles" style="background-color:#FFFFFF">Crowd Control</div>
        <div class="subtitles" style="background-color:#FFFFFF">Public Address</div>
        <div class="subtitles" style="background-color:#FFFFFF">Search & Rescue</div>
        <div class="subtitles" style="background-color:#FFFFFF">Industrial Alerting</div>
        <div class="subtitles" style="background-color:#FFFFFF">Perimeter Security</div>
        <div class="subtitles" style="background-color:#FFFFFF">Event Broadcasting</div>
        <div class="subtitles" style="background-color:#FFFFFF">Border Enforcement</div>
        <div class="subtitles" style="background-color:#FFFFFF"><a name="animal_control" id="animal_control"></a>Animal Control</div>
    </div>

    <div id="controls">
        <div class="scroll_nav_text">first</div>
        <div class="scroll_nav_text">prev</div>
        <div class="scroll_nav_text">next</div>
        <div class="scroll_nav_text">last</div>
        <div class="pageIndex"></div>
    </div>
</div>
</div>

和CSS（虽然这里不需要问题？）

#wrapper{
        position:absolute;
        display:none;
        margin-left:-20px;
        margin-top:50px;
        width:1040px;
        height:600px;
        z-index:1;
    }
    #myScroll .scrollEl{
        position:relative;
        display:none;
        height:510px;
        z-index:1;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }
    #controls div, #controls1 div{
        margin-top:5px;
        background:#fff;
        display:inline-block;
        padding:5px 5px;
        cursor:pointer;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-box-shadow:#999 2px 2px 2px;
        -webkit-box-shadow:#999 2px 2px 2px;
        z-index:1;
    }
    #controls .sel, #controls1 .sel{
        color:#000000 !important;
        font-weight:bold;
    }
    #controls .disabled, #controls1 .disabled{
        color:#333333;
    }
    #controls .page, #controls1 .page{
        padding:10px;
        color:#333333;
    }