在网页左边添加,点击到页面对应位置的控件

CSS代码

.navigation{position: fixed;width: 204px;height: 692px;left: 20px;top:50%;transform: translateY(-50%);background-color: transparent;z-index: 999;}

.tab{width: 150px;height: 44px;margin-left: 31px;cursor: pointer;position: relative;}

.tab1{margin-top: 108px;}

/*

 .tab_top{width: 170px;height: 50px;margin-top:10px;margin-left:21px;cursor: pointer;color: #ffffff;text-align: center;line-height: 50px;font-size: 24x;}

.tab.active{width: 210px;height: 50px;margin-left: 1px;margin-top:-2px;}

.tab .desc{display: none;position: absolute;left: -155px;width: 155px;padding-right: 5px;background-position: left center;background-repeat: no-repeat;}

.tab .desc1{height: 140px;;background-image:  url(/static/mall/images/shuangshiyi/pc/dh-1-1-1.png);}

.tab .desc2{height: 80px;;background-image:  url(/static/mall/images/shuangshiyi/pc/dh-2-1-1.png);}

.tab .desc3{height: 80px;;background-image:  url(/static/mall/images/shuangshiyi/pc/dh-3-1-1.png);}

.tab .desc4{height: 140px;;background-image:  url(/static/mall/images/shuangshiyi/pc/dh-4-1-1.png);}

.tab .desc5{height: 80px;;background-image:  url(/static/mall/images/shuangshiyi/pc/dh-5-1-1.png);}

.tab.active .desc{display: block;}

.tab0{width: 0;height: 0;}

.tab0.active{width: 0;height: 0;}

.tab1.active{background: url(/static/mall/images/shuangshiyi/pc/dh-1-1.png) center center no-repeat;margin-top: 106px;}

.tab2.active{background: url(/static/mall/images/shuangshiyi/pc/dh-2-1.png) center center no-repeat;}

.tab3.active{background: url(/static/mall/images/shuangshiyi/pc/dh-3-1.png) center center no-repeat;}

.tab4.active{background: url(/static/mall/images/shuangshiyi/pc/dh-4-1.png) center center no-repeat;}

.tab5.active{background: url(/static/mall/images/shuangshiyi/pc/dh-5-1.png) center center no-repeat;margin-top: -3px;}

 */

 

HTML代码    

     <!-- 左边控件 -->

    <div class="navigation">

        <div class="tab tab0"></div>

        <div class="tab tab1"><div class="desc desc1">第一，新手注册有礼</div></div>

        <div class="tab tab2"><div class="desc desc2">第二，首次加盟代理</div></div>

        <div class="tab tab3"><div class="desc desc3">第三 , 代理升级巨惠</div></div>

        <div class="tab tab4"><div class="desc desc4">第四，万元充值大礼</div></div>

        <div class="tab tab5"><div class="desc desc5">第五，千元充值抽奖</div></div>

      </div>

 

JS代码

    <script>

        var boolean = true;

        var tops = [0, 450, 1507, 2275, 3130, 4020];

      

        window.onload = function(){

          scrollToAnchor();

        };

      

        window.onhashchange = function(){

          scrollToAnchor();

        };

      

        function scrollToAnchor(){

          var pos = parseInt(GetRequest()) || 0;

          $("html,body").animate({scrollTop: tops[pos]});

          function GetRequest() {

            var str = location.href

            var num = str.indexOf("#");

            str = str.substr(num + 1);

            return str;

          }

        }

      

        initTab();

      

        $(".tab").on("click", function () {

          boolean = false;

          $(this).addClass("active").siblings().removeClass("active");

          $("body,html").animate({

            scrollTop: tops[$(this).index()]

          }, function () {

            boolean = true;

          });

        }).on("mouseover", function () {

          $(this).addClass("active").siblings().removeClass("active");

        }).on("mouseout", function () {

          initTab();

        });

      

        $(".tab_top").on("click", function () {

          boolean = false;

          $(".tab").eq(0).addClass("active").siblings().removeClass("active");

          $("body,html").animate({

            scrollTop: 0

          }, function () {

            boolean = true;

          });

        });

      

        $(document).scroll(function () {

          initTab();

        });

      

        function initTab() {

          if (boolean) {

            var scroH = parseInt($(document).scrollTop());

            var m = 0;

            if (scroH < tops[1]) {

              m = 0;

            } else if (scroH >= tops[tops.length - 1]) {

              m = tops.length - 1;

            } else {

              for (var i = 1; i < tops.length - 1; i++) {

                if (tops[i] <= scroH && scroH < tops[i + 1]) {

                  m = i;

                }

              }

            }

            $(".tab").eq(m).addClass("active").siblings().removeClass("active");

          }

        }

      </script>