仿百度百科弹出层，并跳转到页面的指定的地方

 <style type="text/css">
body{ padding:0px; margin:0px;}
#header{ text-align:center;}
label{ font-weight:bold;}
#menu{ width:220px; height:360px; background-color:#9F3; display:none;}
#menu ul li{ margin-top:20px;}
</style>

 

 

 

<div id="header"><h1>百度百科导航基本原理</h1></div> <div id="menu"> <ul> <li><a href="#a" >条目一</a></li> <li><a href="#b">条目二</a></li> <li><a href="#c">条目三</a></li> <li><a href="#d">条目四</a></li> <li><a href="#e">条目五</a></li> <li><a href="#f">条目六</a></li> <li style="display:none"></li> </ul> </div>

<br /><br />

<label id="a">条目一</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label id="b">条目二</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label id="c">条目三</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label id="d">条目四</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label id="e">条目五</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label id="f">条目六</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <label>&nbsp;</label>

 

<script type="text/javascript">
    var menu = document.getElementById("menu");
    var mts = document.getElementsByTagName("label");
    var lis = menu.getElementsByTagName("li");
    for (var i = 0; i < mts.length; i++) {
        mts.item(i).onclick = function () { alert(this.offsetTop); }
    }

    window.onscroll = function () {
        var ht = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < mts.length; i++) {
            if (mts.item(i).offsetTop < ht + 100 && mts.item(i + 1).offsetTop > ht + 100) {
                lis.item(i).style.color = "#f00";
                lis.item(i).style.fontWeight = "bold";
            } else {
                lis.item(i).style.color = "#000";
                lis.item(i).style.fontWeight = "normal";
            }
        }
        if (ht > 100) {
            menu.style.position = "fixed";
            menu.style.top = "100px";
            menu.style.right = "50px";
            menu.style.display = "block";

         
        }
        else {
            menu.style.position = "relative";
            menu.style.display = "none";
        }
    }

    if (menu.style.display == "block")
    {
        $("li").each(function (index) {
            $(this).click(function () {
                mts.item(index).style.position = "fixed";
            })
        });
    }

</script>