想要实现类似于百度百科中滚动到某一个地方的时间定位到某一处。点角色介绍时定位到角色介绍的主体内容

滚动时定位到某一处。

喜风喜干净

221

发布于
2016-10-17

滚动监听

小小小菜鸟

6551210

发布于
2016-10-17

更新于
2016-10-17

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8" />  
    <title>Document</title>  
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    <script>  
        $(function(){  
            $(".evt_link").click(function(){
                $(this).addClass("active");
                $(this).siblings(".evt_link").removeClass("active");
            });
            var mk=$(".mk");
            var kk=0;
            $(window).scroll(function(){
                kk = document.documentElement.scrollTop || document.body.scrollTop;
                for(var i =0;i<mk.length;i++){
                    if(kk>mk.eq(i).offset().top){
                        $(".evt_link").removeClass('active');
                        $(".evt_link").eq(i).addClass('active');
                    }
                }
            });
        });
    </script>  
    <style type="text/css" media="screen">  
        .mk{height:500px;width:980px;border:1px solid #999;margin:auto;}  
        .evt_nav_right{position:fixed;top:100px;left:20px;width:100px;}  
        .evt_nav_right a{display:inline-block;width:100px;}
        .active{font-weight:bold;color:blue}
    </style>  
</head>  
<body>  
    <div class="evt_nav_right" style="visibility: visible;">  
        <a href="#test01" class="evt_link" title="test01">test01</a>  
        <a href="#test02" class="evt_link" title="test02">test02</a>  
        <a href="#test03" class="evt_link" title="test03">test03</a>  
        <a href="#test04" class="evt_link" title="test04">test04</a>  
        <a href="#test05" class="evt_link" title="test05">test05</a>
    </div>  
  
    <div class="mk" id="test01">test01</div>  
    <div class="mk" id="test02">test02</div>  
    <div class="mk" id="test03">test03</div>  
    <div class="mk" id="test04">test04</div>  
    <div class="mk" id="test05">test05</div>  
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>  
</html>

这应该就是你想要的效果

x007

76311017

发布于
2016-10-15

锚点链接