仿京東樓層滾動效果，點擊樓層，如何讓樓層不要一個一個的跳，而是直接變到對應的樓層

點擊樓層，如何讓樓層不要一個一個的跳，而且直接變到對應的樓層代碼如下

<!DOCTYPE html>  
<html>  
<head>  
<title>JD樓層</title>  
<meta charset="utf-8"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">    
</head> 
<style>
*{padding:0;margin:0;}
.menu-title{border-top:1px solid #ccc;border-right:1px solid #ccc;position:fixed;right:10px;top:10px;background-color:#fff;}
.menu-title li{width:50px;height:50px;line-height:50px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;list-style:none;text-align:center;cursor:pointer;}
.menu-title li.on{background-color:blanchedalmond;}
.floor{background-color:aquamarine;width:100%;height:900px;line-height:400px;margin-top:0;border:1px solid #ccc;}
.menu-cont{overflow:hidden;}
</style>
<body>
    <div style="height:100px;"></div>
    <div id="zc-scrollFloor">
        <ul class="menu-title">
           <li class="on">1F</li>
           <li>2F</li>
           <li>3F</li>
           <li>4F</li>
           <li>5F</li>
        </ul>
        <div class="menu-cont">
            <div class="floor">
                <h4>1F</h4>
            </div>
            <div class="floor">
                <h4>2F</h4>
            </div>
            <div class="floor">
                <h4>3F</h4>
            </div>
            <div class="floor">
                <h4>4F</h4>
            </div>
            <div class="floor">
                <h4>5F</h4>
            </div>
        </div>
    </div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
   
    (function($){
        /*2017/11/16  SWKJ*/
        defaults={
                menuTitleClass:'menu-title',
                menuContClass:'menu-cont',
                menuContChildClass:'floor',
                activeClass:'on'
            };
        $.fn.scrollFloor = function(option){
            var settings = $.extend(defaults,option);
            $(document).scroll(function() {
               var parentHeight = $("."+settings.menuContClass).height(),
                   parentOffsetTop = $("."+settings.menuContClass)[0].offsetTop,
                   docScrollTop = $(window).scrollTop(),
                   childHeight = $("."+settings.menuContChildClass).outerHeight(true);
                   result = docScrollTop -  parentOffsetTop;
                   n = Math.floor(result/childHeight);
                   if(result>=0){
                       setTimeout($("."+settings.menuTitleClass).children().removeClass(settings.activeClass).eq(n).addClass(settings.activeClass),0);
                   }

            });

            $("."+settings.menuTitleClass).children().click(function(){
                var a = $(this).index();
                    tarScrollTop = $("."+settings.menuContClass)[0].offsetTop+$("."+settings.menuContChildClass).outerHeight(true)*a;
                     $("html,body").stop(true).animate({scrollTop:tarScrollTop},500)
            });
        };
    }(jQuery));

     $("#zc-scrollFloor").scrollFloor();
</script>
</body> 
</html>

回答

編輯回答

夕顏

以前寫的。不知道是否滿足樓主需求

http://show.bestime.live/proj...

2018年2月19日 19:38

編輯回答

詆毀你

樓上兩位的答案都可以！我試過！你你根據(jù)自己的需要選擇用吧！

2017年6月23日 08:31

編輯回答

莓森

<div id="zc-scrollFloor">
    <ul class="menu-title">
        <li class="on" > <a href='#a'>1F</a></li>
        <li> <a href='#b'>2F</a></li>
        <li> <a href='#c'>3F</a></li>
        <li> <a href='#d'>4F</a></li>
        <li> <a href='#e'>5F</a></li>
    </ul>
    <div class="menu-cont">
        <div class="floor">
            <h4 id="a">1F</h4>
        </div>
        <div class="floor">
            <h4 id="b">2F</h4>
        </div>
        <div class="floor">
            <h4 id="c">3F</h4>
        </div>
        <div class="floor">
            <h4 id="d">4F</h4>
        </div>
        <div class="floor">
            <h4 id="e">5F</h4>
        </div>
    </div>
</div>

2017年11月15日 12:14