简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 滚动时定位到某一处。
PHPz
PHPz 2017-04-11 13:22:04
0
6
412

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

PHPz
PHPz

学习是最好的投资！

reply all(6)
伊谢尔伦
伊谢尔伦2017-04-11 13:24:04 6 floor

滚动监听

Like +0
Add Reply
黄舟
黄舟2017-04-11 13:24:04 5 floor 
<!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>  
    <p 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>
    </p>  
  
    <p class="mk" id="test01">test01</p>  
    <p class="mk" id="test02">test02</p>  
    <p class="mk" id="test03">test03</p>  
    <p class="mk" id="test04">test04</p>  
    <p class="mk" id="test05">test05</p>  
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>  
</html>

这应该就是你想要的效果

Like +0
Add Reply
迷茫
迷茫2017-04-11 13:24:04 4 floor

锚点链接

Like +0
Add Reply
Ty80
Ty802017-04-11 13:24:04 3 floor

早上想不起来了，是这个bootstrap的这个插件bootstrap，最后一个应该是你要的

Like +0
Add Reply
Ty80
Ty802017-04-11 13:24:04 2 floor

锚点链接、滚动条长度、定位都可以

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 13:24:04 1 floor

http://demos.flesler.com/jque...

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！