结合锚点利用滚动条监听跳转

每一个锚点都相当于一个完整的模块，正好占满一个屏幕，滚动可以直接跳转锚点，

<body>
    <!--头部开始-->
    <div id="header">
        <div id="hlogo">
          <div id="hlogo1">
                家维网
          </div>
          <span id="hlogot">让家居服务更简单</span>
          </div>
        <div id="hzhan"></div>
        <div id="hnav">
            <div id="hnavtop">
                <div class="hnt">地图</div>    
                <div class="hnt">注册</div>    
                <div class="hnt">登录</div>    
            </div>
            <div id="hnavbuttom">
                <div class="hnb">首页</div>
                <div class="hnb">解决方案</div>
                <div class="hnb">专业维修</div>
                <div class="hnb">共享服务</div>
                <div class="hnb">知识分享</div>
                <div class="hnb">关于我们</div>
                
            </div>
        </div>
    </div>
    <!--头部结束-->
    <!--内容开始-->
    <div id="zhuti">
        <div id="maodian">
            <a href="#a1"><div class="md"></div></a>
            <a href="#a2"><div class="md"></div></a>
            <a href="#a3"><div class="md"></div></a>
            <a href="#a4"><div class="md"></div></a>
        </div>
        <a name="a1"></a>
        <div id="ztn1"></div>
        <a name="a2"></a>
        <div id="ztn2"></div>
        <a name="a3"></a>
        <div id="ztn3"></div>
        <a name="a4"></a>
        <div id="ztn4"></div>
    </div>
    
    <div id="footer"></div>
</body>
View Code

css样式：

*{ margin:0 auto;padding:0;}
body{background-color:#999;}
#yemei{width:100%;height:20px;background-image:url(../images/bg.png);}
/*头部开始*/
#header{width:100%;height:120px;position:fixed;top:0px;background-color:#000;opacity:0.7;-moz-opacity:0.7;}
#hlogo{width:200px;height:120px;margin-left:50px;float:left;}
#hlogo1{width:170px;height:100px;background-image:url(../images/logo2.png);background-repeat:no-repeat;background-position:25px;line-height:120px;font-size:30px;color:#fff;text-align:right;}
#hlogot{color:#fff;line-height:20px;font-size:16px;position:relative;top:-10px;left:45px;}
#hzhan{width:400px;height:100%;float:left;}
#hnav{width:600px;height:100%;float:left;}    
#hnavtop{width:100%;height:40px;}
.hnt{width:40px;height:100%;line-height:40px;color:#fff;text-align:center;float:right;margin-right:15px;}
#hnavbuttom{width:100%;height:80px;}
.hnb{width:100px;height:100%;line-height:80px;color:#fff;text-align:center;float:left;font-size:18px;}
/*头部结束*/
/*内容开始*/
#zhuti{width:100%;height:2648px;background-color:#CCC;}
#maodian{ width:50px; height: 300px; position:fixed; right:10px; top:150px;}
.md{ width:30px; height:30px; border-radius:50%; background-color:#fff; margin-bottom:10px;}
#ztn1{ width:100%; height:662px; background-color:#00F;}
#ztn2{ width:100%; height:662px; background-color:#f00;}
#ztn3{ width:100%; height:662px; background-color:#0f0;}
#ztn4{ width:100%; height:662px; background-color:#f60;}
/*内容结束*/
#footer{width:100%;height:120px;background-image:url(../images/bg1-.png);}
#yejiao{width:100%;height:20px;background-image:url(../images/bg.png);}
View Code

js:

var ztn1 = document.getElementById("ztn1");
    var ztn2 = document.getElementById("ztn2");
    var ztn3 = document.getElementById("ztn3");
    var ztn4 = document.getElementById("ztn4");
    var md = document.getElementsByClassName("md");

    window.onscroll = function()
    {
        var sry = window.scrollY;
        if(sry<10 && sry>1)
        {
            window.scroll(0,662);
        }
        if(sry<662 && sry>642)
        {
            window.scroll(0,0);
        }
        if(sry<682 && sry>662)
        {
            window.scroll(0,1324);
        }
        if(sry<1324 && sry>1304)
        {
            window.scroll(0,662);
        }
        if(sry<1344 && sry>1324)
        {
            window.scroll(0,1986);
        }
        if(sry<1986 && sry>1966)
        {
            window.scroll(0,1324);
        }
    }
View Code

　　

posted @ 2017-12-13 20:42  黑山大胖子  阅读(838)  评论(0)  编辑  收藏  举报