change EN tag

docs/assets/css/main.css

@@ -414,6 +414,10 @@ body[data-page="zh_CN/README.md"] .markdown-section {
 
 
 @media screen and (max-width: 768px) {
+
+    .dropdown{
+        display: block;
+    }
     .d-flex {
         display: none !important;
     }
@@ -438,10 +442,11 @@ body[data-page="zh_CN/README.md"] .markdown-section {
         position: fixed;
         right: 0;
         top: 0;
-        width: 50px;
+        width: 100%;
         height: 50px;
         z-index: 1000;
-        box-shadow: -9px 0px 10px 0px #888888;
+        box-shadow: 1px 0px 10px 0px #888888;
+        background-color: white;
     }
     .btn-toggle::before,
     .btn-toggle::after {
@@ -455,22 +460,22 @@ body[data-page="zh_CN/README.md"] .markdown-section {
     }
     .btn-toggle::before {
         top: 10px;
-        left: 10px;
+        right: 10px;
         box-shadow: 0 12px 0 gray;
     }
     .btn-toggle::after {
         top: 34px;
-        left: 10px;
+        right: 10px;
     }
     .btn-toggle.open::before {
         top: 25px;
-        left: 10px;
+        right: 10px;
         transform: rotate(45deg);
         box-shadow: none;
     }
     .btn-toggle.open::after {
         top: 25px;
-        left: 10px;
+        right: 10px;
         transform: rotate(-45deg);
     }
     .markdown-section {
@@ -937,3 +942,92 @@ mark {
     /* overflow-x: auto; */
 }
 
+
+
+.anchor-box {
+    position: fixed;
+    top: 35%;
+    left: 3%;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction:column;
+    z-index: 100;
+    width: max-content;
+
+}
+
+.anchor-box > a {
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: row;
+    height: 33px;
+    width: 160px;
+    padding: 2px 10px;
+    text-decoration: none;
+    outline: none;
+    border: none;
+    border-radius: 25px;
+    color: #fff !important;
+    font-size: 16px;
+    line-height: 1.2;
+    transition: all .3s ease;
+    background-color: #333;
+    box-shadow: 0 10px 30px 0 rgba(51,51,51,.5);
+    -moz-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5);
+    -webkit-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5);
+    margin-top: 12px;
+}
+
+.anchor-box > a:hover {
+    background-color: #ff4b5a !important;
+    box-shadow: 0 10px 30px 0 rgba(255,75,90,.5) !important;
+    -moz-box-shadow: 0 10px 30px 0 rgba(255,75,90,.5) !important;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(255,75,90,.5) !important;
+}
+
+
+.anchor-box span {
+    width: 100px;
+    text-align: center;
+}
+
+.anchor-active {
+    background-color: #ff4b5a !important;
+    box-shadow: 0 10px 30px 0 rgba(255,75,90,.5) !important;
+    -moz-box-shadow: 0 10px 30px 0 rgba(255,75,90,.5) !important;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(255,75,90,.5) !important;
+}
+
+.anchor-quiet {
+    background-color: #333 !important;
+    box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
+    -moz-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
+    -webkit-box-shadow: 0 10px 30px 0 rgba(51,51,51,.5) !important;
+}
+
+
+
+
+@media screen and (max-width: 768px) {
+
+    .anchor-box {
+        position: fixed;
+        top: 45%;
+        left: auto;
+        right: -120px;
+        display: -webkit-flex;
+        display: flex;
+        flex-direction:column;
+        z-index: 9999;
+    }
+
+    .anchor-active {
+        float: left;
+        transform: translateX(-100px) !important;
+    }
+
+    .anchor-quiet {
+        float: left;
+        transform: translateX(0px) !important;
+    }
+}

docs/en/1515/6060-push.md

@@ -4,7 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      :octocat:**[Example](#Example)**      🛒**[Purchase](https://m5stack.com/collections/m5-application/products/m5stack-6060-push)**
 <!--
 :octocat:**[Code](#Code)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 -->
@@ -46,6 +45,13 @@ Product Feature:
 -  **Datasheet** - [Mega328P](http://ww1.microchip.com/downloads/en/DeviceDoc/Atmel-7810-Automotive-Microcontrollers-ATmega328P_Datasheet.pdf)
   
 
+<script>
 
+   var purchase_link = 'https://m5stack.com/collections/m5-application/products/m5stack-6060-push';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>
 
 

docs/en/1515/ap.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/1515-cutting-aluminum-profile-100-200-500-1000mm-used-in-assembling-device)**
-
 ## Description
 
 1515 stands for 15mm * 15mm on the cross-section. Not like most other companies,  M5Stack not just provide the highly productized learning board and programming platform, we also include the structural grade components to make a complete ecosystem for not only IoT development but IIoT (Industrial IoT) as well. 
@@ -29,3 +27,13 @@ As more advanced,  together with the  Aluminium-Profile accessories (connectors,
   -  200mm
   -  100mm
   -  50mm
+
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/1515-cutting-aluminum-profile-100-200-500-1000mm-used-in-assembling-device';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/1515/connectors.md

@@ -1,8 +1,6 @@
 # Aluminium-Profile Connectors {docsify-ignore-all}
 
 
-:memo:**[Description](#Description)**      
-
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 Purchase
 </button>
@@ -76,3 +74,12 @@ These are different types of **1515 Aluminium-Profile** accessories, cataloged b
 - Each set:
     - 1x connector
     - M4 screws
+
+<script>
+
+   var purchase_link = '';
+
+   anchor_search();
+   scrollFunc();
+
+</script>

docs/en/1515/corner.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/plastic-corner-connector-for-1515-aluminum-profile)**
-
 ## Description
 
 This **1515 Corner** is a type of connector for 1515 Aluminum Extrusion. It could help you fast-prototype a 1515  frame.  The package comes with 90-degree corner connectors and screws, you can connect up to 3 Aluminum Extrusions on 3 dimensions and fixed them up with the screws.
@@ -28,3 +26,14 @@ This **1515 Corner** is a type of connector for 1515 Aluminum Extrusion. It coul
     - 1x connector
     - 3x M4 screws
     - 1x cap
+
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/plastic-corner-connector-for-1515-aluminum-profile';
+
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/1515/nut.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/slide-nut-for-1515-aluminum-profile)**
-
 ## Description
 
 **1515 NUT**, like its namesake, is slide component belongs to 1515 Aluminum Extrusion series. It is also known as Drop in Nut.  It's for Drop in 1515 aluminum profile to set carriage or to connect.
@@ -16,4 +14,12 @@
 - Drop in Nut
 
 ## Package Includes
-- 10x pcs
+- 10x pcs
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/slide-nut-for-1515-aluminum-profile';
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/485t.md

@@ -6,8 +6,6 @@
 <img src="assets/img/product_pics/accessory/485t/485t_02.jpg" width="30%" height="30%">
 
 
-:memo:**[Description](#Description)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/m5stack-rs485t)**
-
 ## Description
 
 **485T**,This is a T-shape connector for RS485 communication, which can apply to point to point, one point to multi-point connection, plus a POWER LED for indication. The terminal connector specification is 4pin HT3.96. Many M5 products sharing this type of connector, such as PLC, Base26,  HAT-RS485, etc.
@@ -29,3 +27,11 @@
 <img src="assets/img/product_pics/accessory/485t/485t_04.jpg" width="30%" height="30%">
 
 
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/m5stack-rs485t';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/battery_base.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-unit/products/m5stack-battery-base)**
-
 ## Description
 This is a battery base for 3 types of M5Cameras: M5Camera, M5Camera_X, M5Camera_F. It is a 400mAh Lipo battery.<br>
 You can wire it with the battery interface on M5camera board. Pay attention to the polarity. You can get extra power back up for your M5Camera.
@@ -28,7 +26,14 @@ You can wire it with the battery interface on M5camera board. Pay attention to t
 
 - Power back up 
 
+<script>
 
+   var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stack-battery-base';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>
 
 
 

docs/en/accessory/bus_socket.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/2x15-pin-headers-socket)**
-
 ## Description
 
 **BUS-Socket** is a pair of M-BUS socket, female and male. 2X15 pins.  They share the same specification with the BUS socket on M5Cores. The male piece is 90-degree bend to the side.
@@ -17,4 +15,13 @@
 
 ## Package Includes
 - 1x male socket
-- 1x female socket
+- 1x female socket
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/2x15-pin-headers-socket';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/cable/grove_cable.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**       🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/4pin-buckled-CONNEXT-cable)**
-
 ## Description
 
 **CONNEXT Cable** would be a necessary tool used on M5Stack development, since all PORTs on M5Core are CONNEXT stadard. This CONNEXT cable, compatible with the CONNEXT port on M5Core,simply have 4 lines, two for data, one for power,and one for Ground. We've offered alternative  length: 10cm, 20cm, 50cm, 1m, 2m.
@@ -19,3 +17,12 @@
 ## Feature
 
 -  5 specifications: 10cm, 20cm, 0.5m, 1m, 2m
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/4pin-buckled-CONNEXT-cable';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/cable/lego_cable.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/m5stack-lego-motor-adapter-cable)**
-
 ## Description
 
 **LEGO Cable** is used for LEGO motor which is compatible with BALA and M5Module LEGO+. We have prepared different length to fit your needs on different appliactions.
@@ -15,3 +13,13 @@
 -  3 specifications: 10cm, 20cm, 30cm
 
 <img src="assets/img/product_pics/accessory/lego_cable_01.jpg" alt="lego_cable_01" width="300px" height="300px">
+
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/m5stack-lego-motor-adapter-cable';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/converter/grove2grove.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/connector-grove-to-grove-pin-servo)**
-
 ## Description
 
 **GROVE2GROVE** is a GROVE extension connector. Two female GROVE port sit back-to-back.  One common use of this part is for the RGB LED strip extension.
@@ -17,3 +15,12 @@
   
 ## Package Includes 
 - 5x pcs
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/connector-grove-to-grove-pin-servo';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/converter/grove_t.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/grove-t-connector-5pcs-a-pack)**
-
 ## Description
 
 **CONNEXT-T** is a T-shaped hub. Is this remind you the HUB unit ? They are basically the same thing, just in different shape.This is also used for CONNEXT port expanding.
@@ -13,3 +11,13 @@
 Notice: **CONNEXT-T** is just a hardware expander, if you are looking for hardware and software(standard protocol) expander like I2C, Single-bus, please check **PaHUB** or **PbHUB**. If you connectted two I2C slave devices onto **HUB** that share the same adress, you will have problem getting I2C data from both.
 
 <img src="assets/img/product_pics/accessory/grove_t_02.png" width="60%" height="60%">
+
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/grove-t-connector-5pcs-a-pack';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/frame.md

@@ -6,8 +6,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/frame-panel-extended-install-components)**
-
 ## Description
 
 **Frame** , like its namesake, is a frame for M5Core.  It gives you an extra structure supporting or containing M5Core.
@@ -23,3 +21,12 @@
 <img src="assets/img/product_pics/accessory/frame_03.jpg" alt="frame_03" width="300px" height="300px">
 
 <img src="assets/img/product_pics/accessory/frame_04.jpg" alt="frame_04" width="300px" height="300px">
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/frame-panel-extended-install-components';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/glass_panel_repair_kit.md

@@ -4,8 +4,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/products/glass-panel-rapair-kit)**
-
 ## Description
 
 **Glass Panel Rapair Kit** It is an M5Core external screen replacement kit, which contains M5Core Alec external screen, buttons and disassembly tool accessories. It can easily disassemble the main unit and replace the brand new external screen without strong hands-on ability.
@@ -46,3 +44,11 @@ As time goes by, the screen surface and buttons of the M5Core may be filled with
 <img src="assets\img\product_pics\accessory\glass_panel_repair_kit\glass_panel_repair_kit_05.jpg" width="100%" >
 
 
+<script>
+
+   var purchase_link = 'https://m5stack.com/products/glass-panel-rapair-kit';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>

docs/en/accessory/screw.md

@@ -6,8 +6,6 @@
 
 ***
 
-:memo:**[Description](#Description)**      🛒**[Purchase](https://m5stack.com/collections/m5-accessory/products/8-pcs-m3-12-18-25-32-screw-with-allen-key)**
-
 ## Description
 
 **SCREW** would be a necessary tool used on M5Stack development. If you having multiple layers stacked up and you might want fix them up with something. Here comes this SCREW Accessory Kit, packed with 4 different length of M3 screws and an Allen Key. Got this sutff will definately help you making more complicated and organized work around M5Stack.
@@ -22,3 +20,12 @@
       - 2x M3-25
       - 2x M3-32
       - 1x Allen Key
+
+<script>
+
+   var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/8-pcs-m3-12-18-25-32-screw-with-allen-key';
+
+   anchor_search(purchase_link);
+   scrollFunc();
+
+</script>