mui组件 a 锚点定位（Demo案例演示）- 代码篇

---

从踩坑，入坑，到跳出坑：mui框架（在mui-scroll中如何进行页内锚点跳转）

---

引言：

• mui页面内<a>锚点跳转：
• 说明： 正常的网页可以通过锚点跳转;
  比如 <a href="#detail">，可以跳转到id为detail的位置，但使用了mui-scroll的mui页面，用这个锚点跳转无效！

那么，用什么方法实现锚点跳转？

• 参考方案 · 分析：点击详情

---

思路就是：

- 我们可以使用另外一种MUI组件，即：（顶部选项卡-div模式）来代替你的思路，并实现你要的功能，

- 但是：原理还是锚点定位。

---

了解这个组件： 顶部选项卡-div模式 · ( 点击了解详情 )

使用说明：

• 添加如下代码：【博主笔记：具体参考项目文件 · 如下截图所示】
  //声明：实现关于我们、文章内容页tabs组件（锚点）切换
mui('body').on('tap','a',function(){document.location.href=this.href;});
  

---

---

需要的效果 · 截图说明：

博主笔记：具体参考项目 · 内容页面 show_xxxx_zjbl.html

---

图文解说：

1. 页面尚未滚动（图1）
2. 页面滚动到恰当位置，tabtn区域 被定位固定在指定位置（图2）
3. 点击图2中的其他tabtn，页面滚动到指定的位置（图3）

---

临时参考阅读：

1. mui 锚点切换 绕开a标签
2. MUI-scroll滚动，重新定位滚动位置
3. MUI Scroll插件（滚动）
4. mui-scroll-wrapper 滚动导航 如何默认到指定位置

---

---

代码解决 · 示下：

注意：该案例使用的仍然是mui组件，灵活应用，对项目需求的开发入坑及其解决之道（另辟蹊径，另寻思路）。
仍然离不开锚点定位，只不过mui框架已经给我们封装好了。

<div style="padding: 10px;background: none;">
	<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
		<a class="mui-control-item mui-active" href="#section1"><span>报名流程</span></a>
		<a class="mui-control-item line" href="#section2"><span>培训价格</span></a>
		<a class="mui-control-item line" href="#section3"><span>表格下载</span></a>
	</div>
</div>
<div class="tabs-content mui-content-padded" style="color: #666666;font-size: 14px;line-height: 20px;">
	<!--报名流程-->
	<div class="mui-control-content mui-active" id="section1">
	<div class="此处都是内容，样式请自定义">
			<h4 style="">报名流程</h4>
			<div>二手车鉴定评估师是。。。。。。职业技能证书。</div>
	</div>
	</div>
	<!--培训价格-->
	<div class="mui-control-content" id="section2">
	<div class="此处都是内容，样式请自定义">
			<h4 style="">培训价格</h4>
			办证费用<br>
			<br>
			。。。。。。
			<br>
			高级证书：680元&nbsp;
	</div>
	</div>
	<!--表格下载-->
	<div class="mui-control-content" id="section3">
	<div class="此处都是内容，样式请自定义">
			<h4 style="">表格下载</h4>
			。。。。。。
			<a href="">点击下载</a>
	</div>
	</div>

</div>

---

以上就是关于“ mui组件 a 锚点定位（Demo案例演示）- 代码篇 ” 的全部内容。