spz-anchor 锚点

• 当有一个滚动的长内容元素，其中可以分为多个部分提取标题时。
• 当内容与标题需要双向交互、定位的时候。

最基础的用法。使用需要遵循以下规范：

• 需要有role="anchor-links"的元素表示承载标题列表的容器。

  • data-anchor-link="锚点名称"的元素表示标题, 点击时可跳转至内容里的锚点。

• 需要有role="anchor-scrollable-container"的滚动元素承载主体内容部分。

  • 在内容中使用data-anchor-part="锚点名称"的元素作为锚点，滚动时与标题交互。
  • Vendor
  • Availability
  • Color
  • Height

  • Somethings...

  • Vendor

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.

  • Avaibility

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.

  • Color

    Red

    Blue

    Orange

    Purple

    Green

  • Height

  <spz-anchor class="anchor" layout="container">
    <ul class="anchor-tabs" role="anchor-links">
      <li data-anchor-link="vendor">Vendor</li>
      <li data-anchor-link="availability">Availability</li>
      <li data-anchor-link="color">Color</li>
      <li data-anchor-link="height">Height</li>
    </ul>
    <ul class="anchor-scrollable-container" role="anchor-scrollable-container">
      <li>Somethings...</li>
      <li data-anchor-part="vendor">
        <h3 style="margin: 0 0 16px;">Vendor</h3>
        <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.</div>
      </li>
      <li data-anchor-part="availability">
        <h3 style="margin: 0 0 16px;">Avaibility</h3>
        <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.Lorem ipsum dolor sit, amet consectetur adipisicing elit. In, repellendus. Adipisci at, veniam libero, facilis, hic tenetur sed earum corporis provident magnam rerum laboriosam voluptate quam laborum. Sunt, quidem nihil.</div>
      </li>
      <li data-anchor-part="color">
        <h3 style="margin: 0 0 16px;">Color</h3>
        <div>
          <div>Red</div>
          <div>Blue</div>
          <div>Orange</div>
          <div>Purple</div>
          <div>Green</div>
        </div>
      </li>
  <li data-anchor-part=“height”>
  <h3 style=“margin: 0 0 16px;”>Height</h3>
  </li>
  </ul>
  </spz-anchor>

重新初始化元素的事件。

解除组件上的事件监听，无需参数。