滚动页面scrollTop()

最新推荐文章于 2023-03-30 23:35:36 发布

jiaqi2016

最新推荐文章于 2023-03-30 23:35:36 发布

阅读量1.4k

点赞数

分类专栏：备忘

本文链接：https://blog.csdn.net/u010507920/article/details/52706068

版权

备忘专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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>

jiaqi2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动页面scrollTop()

滚动页面scrollTop() *{ margin: 0; padding:0; } .div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9{ width: 100%; height: 600px; font-size: 5
复制链接

扫一扫