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

文章目录

`从踩坑，入坑，到跳出坑`：mui框架（在mui-scroll中如何进行页内锚点跳转）`那么，用什么方法实现锚点跳转？``思路就是：`- 我们可以使用另外一种MUI组件，即：`（顶部选项卡-div模式）`来代替你的思路，并实现你要的功能，- `但是：原理还是锚点定位。``了解这个组件：` [顶部选项卡-div模式](https://dcloud.io/hellomui/examples/tab-with-segmented-control.html) · ( [点击了解详情](https://dcloud.io/hellomui/examples/tab-with-segmented-control.html) )使用说明：需要的效果 · 截图说明：图文解说：临时参考阅读：代码解决 · 示下：

`从踩坑，入坑，到跳出坑`：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）页面滚动到恰当位置，tabtn区域被定位固定在指定位置（图2）点击图2中的其他tabtn，页面滚动到指定的位置（图3）

临时参考阅读：

mui 锚点切换绕开a标签MUI-scroll滚动，重新定位滚动位置MUI Scroll插件（滚动）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元 </div></div><div class="mui-control-content" id="section3"><div class="此处都是内容，样式请自定义"><h4 style="">表格下载</h4>。。。。。。<a href="">点击下载</a></div></div></div>