解决页面添加锚点后跳转改变URL问题

  直接奔主题,前端简单地锚点实现,把 a 标签的 href 写成想要跳到的元素的id ,比如点击 <a href="#box"></a> 页面就会自动滚动到 <div id="box"></div> 元素的位置。

  那么这样使用会产生一个现象,那就是 url 会被改变,浏览器默认的行为会将 id 放在 url 后面。比如:http://www.xxx.com#box

  此时返回上一页可能不是我们想要的路由,当页面刷新也会出席那问题

  解决的方法:

  把a标签替换掉,或者不加href,我们把要点击的按钮绑定一个点击事件:

//给想要点击的元素绑定事件并传入要跳到元素的id
//因为项目使用Vue就直接写@click
<a @click="changeHash('#box2')"></a>

//使用document.querySelector实现锚点的效果
changeHash(idName) {
    document.querySelector(idName).scrollIntoView(true);
}
微信小程序实现锚点定位主要是通过`wx.navigateTo`或`wx.redirectTo`API,并配合使用HTML5的`hashchange`事件。当你需要在一个页面内部跳转到指定的DOM元素位置时,可以这样做: 1. 首先,在需要设置锚点页面上,给目标元素添加一个自定义属性,比如`data-hash-id`,并赋值为其在文档的ID。 ```html <a class="anchor" data-hash-id="section1">导航到第1节</a> <div id="section1" class="target">这是第1节的内容...</div> ``` 2. 然后,在JavaScript监听`hashchange`事件,当URL的哈希部分改变时,找到对应的DOM元素。 ```javascript 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`处理。 ```javascript 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锚点信息。 ```json { "window": { "backgroundTextStyle": "#fff", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat App", "navigationBarTextStyle": "black", "enablePullDownRefresh": false, "enableScrollAnimation": true, "animationDuration": 0.3, "scrollIndicatorStyle": "default" }, "pages":[...] } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值