滚动页面scrollTop()

来源：互联网发布：淘宝未评价的订单编辑：程序博客网时间：2024/06/06 10:22
<!doctype html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>滚动页面scrollTop()</title>    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>    <style>    *{        margin: 0;        padding:0;    }    .div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9{        width: 100%;        height: 600px;        font-size: 50px;    }    .div1{        background: #f00;    }    .div2{        background: green;    }    .div3{        background: orange;    }    .div4{        background: blue;    }    .div5{        background: #00f;    }    .div6{        background: gray;    }    .div7{        background: red;    }    .div8{        background: orange;    }    .div9{        background: green;    }    .leftsite-nav{            position: fixed;            top: 50%;            left: 0;            margin-top: -80px;            z-index:100;            font-size: 14px;    }    .leftsite-nav li{        width: 100px;        height: 35px;        margin-left: -70px;        text-align: center;        line-height: 35px;        border-radius: 50%;        z-index:11;        cursor: pointer;    }    #leftsite-list em{        display: block;        width: 30px;        text-align: center;        float: right;    }    #leftsite-list a{        text-decoration:none;        color: #000;    }    .leftsite-nav li:hover{        background:  #fcc6ab;        color: #f00;    }    </style></head><body><div class="div1 box">div1</div><div class="div2 box">div2</div><div class="div3 box">div3</div><div class="div4 box">div4</div><div class="div5 box">div5</div><div class="div6 box">div6</div><div class="div7 box">div7</div><div class="div8 box">div8</div><div class="div9 box">div9</div><div class="leftsite-nav">    <ul id="leftsite-list">        <li><a href="javascript:void(0)">返回顶部</a><em>TOP</em></li>        <li><a href="javascript:void(0)">明星单品</a><em>1F</em></li>        <li><a href="javascript:void(0)">智能硬件</a><em>2F</em></li>        <li><a href="javascript:void(0)">搭配</a><em>3F</em></li>        <li><a href="javascript:void(0)">配件</a><em>4F </em></li>        <li><a href="javascript:void(0)">周边</a><em>5F</em> </li>        <li><a href="javascript:void(0)">为你推荐</a><em>6F</em></li>        <li><a href="javascript:void(0)">内容</a><em>7F</em></li>        <li><a href="javascript:void(0)">视频</a><em>8F</em></li>    </ul></div><script>//左侧楼层导航  var btb=$(".leftsite-nav");  var tempS;  $(".leftsite-nav").hover(function(){      var thisObj = $(this);      tempS = setTimeout(function(){      thisObj.find("li").each(function(i){        var tA=$(this);        setTimeout(function(){ tA.animate({marginLeft:"0"},200);},50*i);      });    },200);  },function(){    if(tempS){ clearTimeout(tempS); }    $(this).find("li").each(function(i){      var tA=$(this);      setTimeout(function(){ tA.animate({marginLeft:"-70"},200,function(){      });},50*i);    });  });  var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;  $('#leftsite-list li').click(    function(){        var index=$(this).index();        $('html,body').animate({            'scrollTop':$($('.box')[index]).offset().top        },'normal')    })var array=[];for(var i=0;i<$('.box').length;i++){    array.push($($('.box')[i]).offset().top);}$(window).scroll(function(){    var s=$(window).scrollTop();})</script></body></html>
0 0