微信小程序实现锚点定位

微信小程序实现锚点定位主要是通过`wx.navigateTo`或`wx.redirectTo`API，并配合使用HTML5的`hashchange`事件。当你需要在一个页面内部跳转到指定的DOM元素位置时，可以这样做：

1. 首先，在需要设置锚点的页面上，给目标元素添加一个自定义属性，比如`data-hash-id`，并赋值为其在文档中的ID。

<a class="anchor" data-hash-id="section1">导航到第1节</a>
<div id="section1" class="target">这是第1节的内容...</div>

2. 然后，在JavaScript中监听`hashchange`事件，当URL的哈希部分改变时，找到对应的DOM元素。

Page({
  onReady: function() {
    const hashId = wx.getStorageSync('currentHash') || location.hash.replace('#', '');
    this.handleHashChange(hashId);
  },
  
  handleHashChange: function(hashId) {
    const targetElement = document.getElementById(hashId);
    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth' // 设置平滑滚动
      });
      wx.setStorageSync('currentHash', hashId); // 更新本地存储
    }
  },
  
  onHashChange: function(e) { // 监听hash变化
    this.handleHashChange(e.detail.hash);
  }
})

3. 当用户点击锚点链接时，直接修改URL的hash值并触发`handleHashChange`处理。

const anchorLinks = document.querySelectorAll('.anchor');
anchorLinks.forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认行为
    const hashId = this.getAttribute('data-hash-id');
    wx.navigateTo({
      url: `/pages/current?hash=${hashId}`
    }); // 跳转时携带hash值
  });
});

4. 在路由切换时，可以在全局配置文件`app.json`中设置页面间的默认加载行为，将`window`属性设为`true`，这样子页面会自动获取并处理URL中的锚点信息。

{
  "window": {
    "backgroundTextStyle": "#fff",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat App",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": false,
    "enableScrollAnimation": true,
    "animationDuration": 0.3,
    "scrollIndicatorStyle": "default"
  },
  "pages":[...]
}