锚点连接

HTML中的锚点链接

命名锚点链接的应用：

命名锚点的作用：在同一页面内的不同位置进行跳转。

制作锚标记：

1)给元素定义命名锚记名

语法：<标记 id="命名的锚记名"> </标记>

2)命名锚记连接

语法：

点击a标签即可跳转到标记id页面位置。

小程序中的锚点定位

在小程序中实现锚点定位，需要使用到组件scroll-view,主要是通过scroll-into-view属性进行绑定，给绑定的元素和被绑定的元素相同的id值即可。 具体实现代码

wxml

//绑定的元素
<view class="btn_jump">
  <view class='btn_item' bindtap='jumpTo' data-opt="item0">ToItem0</view>
  <view class='btn_item' bindtap='jumpTo' data-opt="item11">ToItem11</view>
  <view class='btn_item' bindtap='jumpTo' data-opt="item29">ToItem29</view>
</view>

//定位的区域

<scroll-view class="jump_list"
    scroll-into-view="{{toView}}" 
    scroll-y="true" 
    scroll-with-animation="true" >
  <view wx:for="{{30}}" wx:key="{{item}}"
      id="item{{item}}" class="list_item" >
      {{item}}
  </view>
</scroll-view>

wxs

Page({
  data: {
  },
  onLoad: function () {
  },
  jumpTo:  function (e) {
    // 获取标签元素上自定义的 data-opt 属性的值
    let target = e.currentTarget.dataset.opt;
    this.setData({
        toView: target
    })
  }
})

最后只要在点击要跳转的元素上绑定的方法里获取到定义的data-opt的值，让其scroll-into-view的属性值等于该data-opt的值即可实现锚点定位