fix anchor tab-review by wenxue

@@ -30,7 +30,7 @@
                 <div {{#if param.anchorname}} id="{{param.anchorname}}" {{/if}}
                      {{#if param.tabname}} tabname="{{param.tabname}}" {{/if}}
                      {{#if id}}data-id="{{id}}" {{/if}}
-                     class="floor clearfix {{type}} {{#if hide}}hide{{/if}}"
+                     class="floor clearfix {{type}} {{#if hide}}hide{{/if}}{{#if param.anchorname}} anchor-floor{{/if}}"
                      style="{{#if param.bgcolor}}background-color:{{param.bgcolor}};{{/if}}{{#if param._bgimgFill}}background-image: url({{imageslim param._bgimgFill}});{{/if}}">
                     {{!-- 背景图片 --}}
                     {{#if param.bgimg}}
@@ -120,10 +120,10 @@
                                         {{/list}}
                                     </div>
                                     {{else}}
-                                    <div class="tab-container {{#isEqualOr topFloat '1'}} tab-fix {{/isEqualOr}}" style="width: {{containerWidth}};{{#if bgimg}}background-image: url({{imageslim bgimg}});{{/if}}">
+                                    {{log this}}
+                                    <div class="tab-container{{#isEqualOr topFloat '1'}} tab-fix{{/isEqualOr}}{{#isEqualOr anchorTab '1'}} anchor-tab{{/isEqualOr}}" style="width: {{containerWidth}};{{#if bgimg}}background-image: url({{imageslim bgimg}});{{/if}}">
                                         {{#list}}
-                                            <a class="anchor {{#isEqualOr ../chooseTab link}}active{{/isEqualOr}}"
-                                                tab= {{link}} style="{{tabStyle @index ../num}}">
+                                            <a class="anchor {{#isEqualOr ../chooseTab link}}active{{/isEqualOr}}" tab={{link}} style="{{tabStyle @index ../num}}">
                                                 <img src="{{src}}" style="{{#isEqualOr ../chooseTab link}} {{^}}display: none;{{/isEqualOr}}" alt="">
                                             </a>
                                         {{/list}}

@@ -515,6 +515,7 @@ function videoInit() {
 
 let store = {
     tab: {
+        anchorTab: '',
         tabs: [],
         cloneTabs: [],
         seckillCoupunTime: {
@@ -526,6 +527,32 @@ let store = {
     }
 };
 
+function tabItemChoose(tab, isRemove) {
+    if (typeof tab === 'string') {
+        tab = $(tab);
+    }
+
+    if (isRemove) {
+        tab.removeClass('active');
+        tab.find('img').hide();
+        tab.siblings('a.anchor').removeClass('active');
+        tab.siblings('a.anchor').find('img').hide();
+
+        tab.closest('.tab-scroll-container').scrollLeft(0);
+    } else {
+        tab.toggleClass('active');
+        tab.find('img').show();
+
+        tab.siblings('a.anchor').removeClass('active');
+        tab.siblings('a.anchor').find('img').hide();
+
+        let tabWrap = tab.closest('.tab-scroll-container');
+        let {offsetLeft, offsetWidth} = tab[0] || {};
+
+        tabWrap.scrollLeft(offsetLeft - (tabWrap.width() - offsetWidth) / 2);
+    }
+}
+
 function tabInit() {
     $('.tab-container').each(function() {
         var $this = $(this);
@@ -536,6 +563,10 @@ function tabInit() {
             store.tab.tabs = tabs;
         }
 
+        if ($this.hasClass('anchor-tab')) {
+            store.tab.anchorTab = $this;
+        }
+
         let tabnames = tabs.map(function(i, el) {
             // 限时抢券
             const startTime = +$(el).attr('start-time');
@@ -574,38 +605,49 @@ function tabInit() {
         // 绑定单击事件
         tabs.on('click', function() {
             var tab = $(this);
+            var tabPar = tab.parent();
             var tabname = tab.attr('tab');
 
             if (tab.hasClass('active')) {
                 return;
             }
 
-            tab.toggleClass('active');
-            tab.find('img').show();
+            tabItemChoose(tab);
 
-            tab.siblings('a.anchor').removeClass('active');
-            tab.siblings('a.anchor').find('img').hide();
+            // 锚点
+            if (tabPar.hasClass('anchor-tab')) {
+                let {top} = $(`#${tabname}`).offset() || {};
 
-            $('div[tabname]').each(function(index, el) {
-                let $el = $(el);
-                let tname = $el.attr('tabname');
+                if (top) {
+                    if (tabPar.hasClass('tab-fix')) {
+                        top -= tab.height();
+                    }
 
-                if (!tabnames.includes(tname)) {
-                    return;
+                    $(document).scrollTop(top + 1);
                 }
+            } else {
+                $('div[tabname]').each(function(index, el) {
+                    let $el = $(el);
+                    let tname = $el.attr('tabname');
+
+                    if (!tabnames.includes(tname)) {
+                        return;
+                    }
+
+                    if (tname === tabname) {
+                        $el.show();
+                    } else {
+                        $el.hide();
+                    }
+                });
+            }
 
-                if (tname === tabname) {
-                    $el.show();
-                } else {
-                    $el.hide();
-                }
-            });
         });
     });
 }
 
 function tabFixInit() {
-    let tabNavFix = $('.tab-fix').parent();
+    let tabNavFix = $('.tab-fix').closest('.floor');
     let curTab = tabNavFix.find('.anchor.active');
 
     if (tabNavFix.length) {
@@ -641,13 +683,7 @@ function syncTabsStatus() {
                 var $ele = $(ele);
 
                 if ($ele.attr('tab') === tabname) {
-                    if (isActive) {
-                        $ele.addClass('active');
-                        $ele.find('img').show();
-
-                        $ele.siblings('a.anchor').removeClass('active');
-                        $ele.siblings('a.anchor').find('img').hide();
-                    }
+                    isActive && tabItemChoose($ele);
                 }
             });
         });
@@ -662,19 +698,78 @@ function syncTabsStatus() {
                 var $ele = $(ele);
 
                 if ($ele.attr('tab') === tabname) {
-                    if (isActive) {
-                        $ele.addClass('active');
-                        $ele.find('img').show();
-
-                        $ele.siblings('a.anchor').removeClass('active');
-                        $ele.siblings('a.anchor').find('img').hide();
-                    }
+                    isActive && tabItemChoose($ele);
                 }
             });
         });
     }
 }
 
+function anchorFloorInit() {
+    if (!store.tab.anchorTab) {
+        return;
+    }
+
+    let anchorFloor = $('.anchor-floor');
+
+    if (!anchorFloor.length) {
+        return;
+    }
+
+    let floor = [];
+
+    anchorFloor.each(function() {
+        floor.push($(this));
+    });
+
+    let doc = $(document);
+    let curTabName = '';
+
+    $(window).scroll(function() {
+        let tabname;
+        let top = doc.scrollTop();
+        let anchorTabHetght = store.tab.anchorTab.height();
+
+        floor.forEach(val => {
+            if (top + anchorTabHetght > val.offset().top) {
+                tabname = val.attr('id');
+            }
+        });
+
+        if (curTabName === tabname) {
+            return;
+        }
+
+        curTabName = tabname;
+
+        if (curTabName) {
+            if (store.tab.tabs.length) {
+                store.tab.tabs.each(function(index, ele) {
+                    var $ele = $(ele);
+
+                    if ($ele.attr('tab') === tabname) {
+                        !$ele.hasClass('active') && tabItemChoose($ele);
+                    }
+                });
+            }
+
+            if (store.tab.cloneTabs.length) {
+                store.tab.cloneTabs.each(function(index, ele) {
+                    var $ele = $(ele);
+
+                    if ($ele.attr('tab') === tabname) {
+                        !$ele.hasClass('active') && tabItemChoose($ele);
+                    }
+                });
+            }
+        } else {
+            console.log(store.tab.tabs);
+            store.tab.tabs.length && tabItemChoose(store.tab.tabs.eq(0), true);
+            store.tab.cloneTabs.length && tabItemChoose(store.tab.cloneTabs.eq(0), true);
+        }
+    });
+}
+
 function modalInit() {
     $('a.modalimg').on('click', function() {
         $($(this).next('.modal')[0]).show();
@@ -1542,6 +1637,9 @@ $(function() {
     // 同步 tab 和 tab 顶悬浮的选中状态
     syncTabsStatus();
 
+    // 锚点楼层tab切联动
+    anchorFloorInit();
+
     if (sessionStorage) {
         // 微信中点击之后，返回跳到指定位置
         let totalH, scH;