Mobile Dual-Direction Linked Category List with Anchor Positioning

Add-ons

2026-07-25 23:08 5 次浏览 • 0 次下载 8.7KB

Mobile Dual-Direction Linked Category List with Anchor Positioning

Plugin description: Mobile navigation for product category pages with scrolling anchor positioning.

Last updated: 2020-04-10 08:17:49

Feature Description

Product categories, category layout

Required modules

No dependencies required. Simply include the files to use it.

Quick Start

For more layouts, refer to the original file. The left navigation ul>li corresponds to the right product list ul>li as anchors.

<div class="sort_container" id="sort_container">
    <!-- Left navigation -->
    <div class="sort_navbar">
        <ul>
            <li class="on">Category 1</li>
            <li>Category 2</li>
        </ul>
    </div>
    <!-- Right-side products -->
    <div class="sort_wrap">
        <ul>
            <li>
                /* Title */
                <div class="title">Category 1</div>
                <div class="product">
                    <div class="product_box">
                        /* Product image */
                        <img src="image/img_1.png"> /* Product name */
                        <span>Mobile Phone</span>
                    </div>
                    <div class="product_box">
                        /* Product image */
                        <img src="image/img_2.png"> /* Product name */
                        <span>Mobile Phone</span>
                    </div>
                </div>
            </li>
            <li>
                /* Title */
                <div class="title">Category 1</div>
                <div class="product">
                    <div class="product_box">
                        /* Product image */
                        <img src="image/img_1.png"> /* Product name */
                        <span>Mobile Phone</span>
                    </div>
                    <div class="product_box">
                        /* Product image */
                        <img src="image/img_2.png"> /* Product name */
                        <span>Mobile Phone</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
// Initialization code: window.onload = function () { isCategory.init(); }

Special Note

Due to platform differences, clicking the navigation item triggers a smooth scrolling animation on Android, while iOS jumps directly to the anchor position.

To modify the styles, refer to the CSS file. For additional custom features, feedback, or bug reports, contact QQ:910547462.