mui 实现`<a>`锚点定位（演示） - `【建议：仅作为参考】`

更改了js部分的源码class类名，可对比官方代码，匹配学习。

重要说明：本案例，改编自“官方demo演示地址 · 点击了解详情”

重要说明：

代码仅适用于单页面，不支持与 “侧滑导航组件” 一起使用！

效果 · 截图：

代码示下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>MUI-scroll</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--标准mui.css--><link rel="stylesheet" href="mui/mui.min.css"><!--App自定义的css--><link rel="stylesheet" type="text/css" href="mui/app.css" /><style>body,.mui-content,header,footer{max-width: 640px;margin: 0 auto;}.section-content {display: block;}/*自定义*/.mui-content{background: #FFF;}.overf-x{overflow-x: auto;}.overf-y{overflow-y: auto;}.h300{min-height: 300px;background: #555555;}.h500{min-height: 500px;background: #999999;}.h700{min-height: 700px;background: #666666;}           .mui-bar-nav~.mui-content.pdt50{padding-top: 50px;}.mui-bar-nav~.mui-content.pdt60{padding-top: 60px;}.mui-bar-nav~.mui-content.pdt70{padding-top: 70px;}.mui-bar-nav~.mui-content.pdt80{padding-top: 80px;}.mui-bar-nav~.mui-content.pdt90{padding-top: 90px;}#tabControls{background: #FFF;padding: 0 10px;box-sizing: border-box;}/*按钮区*/.card_demo.mui-grid-view.mui-grid-9 {background-color: #FFF;border: none;padding: 0 10px;}.card_demo.mui-grid-view.mui-grid-9 .mui-table-view-cell {padding: 0;}.card_demo.mui-grid-view.mui-grid-9 .mui-table-view-cell {border-right: none;position: relative;}.card_demo.mui-grid-view.mui-grid-9 .mui-table-view-cell a {font-size: 14px;}.card_demo.mui-table-view.mui-grid-view .mui-table-view-cell .tabtn {background: #EEEEEE;}.card_demo.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {margin-top: 0;}.card_demo.mui-table-view.mui-grid-view .mui-table-view-cell .tabtn .mui-media-body {color: #999999;}</style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">侧面选项卡-div模式</h1></header><div class="mui-content pdt50"><div class="mui-row mui-fullscreen" style="top: 100px;"><!--左侧区域--><div class="overf-y" style="position: fixed;top: 50px;left: 0;z-index: 10;"><div id="tabControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical"><ul class="mui-table-view mui-grid-view mui-grid-9 card_demo" id="cardclick_ul" style="width: 100%;height:35px;padding: 0 10px;box-sizing: border-box;"><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 stop"><a class="tabtn active" data-index="1" href="#section1"><div class="mui-media-body">报名流程</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 stop line"><a class="tabtn" data-index="2" href="#section2"><div class="mui-media-body">培训价格</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4 stop line"><a class="tabtn" data-index="3" href="#section3"><div class="mui-media-body">表格下载</div></a></li></ul></div></div><!--右侧区域--><div id="tabBox" class="overf-y" style="border-left: 1px solid #c8c7cc;"><div id="section1" class="section-content h500">123</div><div id="section2" class="section-content h300">345</div><div id="section3" class="section-content h700">789</div></div></div></div><script src="mui/mui.min.js"></script><script>mui.init({swipeBack: true //启用右滑关闭功能});var controls = document.getElementById("tabControls");var contents = document.getElementById("tabBox");//默认选中第一个controls.querySelector('.mui-control-item').classList.add('mui-active');
//          contents.querySelector('.section-content').classList.add('mui-active');(function() {var tabBtnsElem = document.getElementById("tabControls");var tabBoxElem = document.getElementById("tabBox");var controlListElem = tabBtnsElem.querySelectorAll('.mui-control-item');var contentListElem = tabBoxElem.querySelectorAll('.section-content');var controlWrapperElem = tabBtnsElem.parentNode;var controlWrapperHeight = controlWrapperElem.offsetHeight;var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight;//左侧类别最大可滚动高度var maxScroll = tabBoxElem.scrollHeight - tabBoxElem.offsetHeight;//右侧内容最大可滚动高度var controlHeight = controlListElem[0].offsetHeight;//左侧类别每一项的高度var controlTops = []; //存储control的scrollTop值var contentTops = [0]; //存储content的scrollTop值var length = contentListElem.length;for (var i = 0; i < length; i++) {controlTops.push(controlListElem[i].offsetTop + controlHeight);}for (var i = 1; i < length; i++) {var offsetTop = contentListElem[i].offsetTop;if (offsetTop + 100 >= maxScroll) {var height = Math.max(offsetTop + 100 - maxScroll, 100);var totalHeight = 0;var heights = [];for (var j = i; j < length; j++) {var offsetHeight = contentListElem[j].offsetHeight;totalHeight += offsetHeight;heights.push(totalHeight);}for (var m = 0, len = heights.length; m < len; m++) {contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));}break;} else {contentTops.push(parseInt(offsetTop));}}tabBoxElem.addEventListener('scroll', function() {var scrollTop = tabBoxElem.scrollTop;for (var i = 0; i < length; i++) {var offsetTop = contentTops[i];var offset = Math.abs(offsetTop - scrollTop);
//                      console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);if (scrollTop < offsetTop) {if (scrollTop >= maxScroll) {onScroll(length - 1);} else {onScroll(i - 1);}break;} else if (offset < 20) {onScroll(i);break;}else if(scrollTop >= maxScroll){onScroll(length - 1);break;}}});var lastIndex = 0;//监听content滚动var onScroll = function(index) {if (lastIndex !== index) {lastIndex = index;var lastActiveElem = tabBtnsElem.querySelector('.mui-active');lastActiveElem && (lastActiveElem.classList.remove('mui-active'));var currentElem = tabBtnsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');currentElem.classList.add('mui-active');//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶var controlScrollTop = controlWrapperElem.scrollTop;if (controlScrollTop + controlWrapperHeight < controlTops[index]) {controlWrapperElem.scrollTop = controlMaxScroll;} else if (controlScrollTop > controlTops[index] - controlHeight) {controlWrapperElem.scrollTop = 0;}}};//滚动到指定contentvar scrollTo = function(index) {tabBoxElem.scrollTop = contentTops[index];};mui(tabBtnsElem).on('tap', '.mui-control-item', function(e) {scrollTo(this.getAttribute('data-index'));return false;});})();</script></body></html>

以上就是关于“ mui 实现<a>锚点定位 (demo演示)【建议：仅作为参考】 ” 的全部内容。

mui 实现a锚点定位 (demo演示)【建议：仅作为参考】相关推荐

mui组件 a 锚点定位（Demo案例演示）- 代码篇
文章目录 `从踩坑,入坑,到跳出坑`:mui框架(在mui-scroll中如何进行页内锚点跳转) `那么,用什么方法实现锚点跳转?` `思路就是:` - 我们可以使用另外一种MUI组件,即:`(顶部选 ...
jquery锚点定位
jquery实现锚点定位功能这里主要是通过jquery实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 $leftnav为左侧楼层导航栏(left-nav),右侧right-conten ...
mysql注入 xfkxfk_WSS最新版多处SQL注入直接获取数据三（官方demo演示及快速定位漏洞技巧）...
### 简要描述: WSS最新版多处SQL注入直接获取数据三,官方demo演示,这里存在多处,对同一问题进行总结 ### 详细说明: WSS最新版1.3.2,这里存在多处,并对此同一问题进行总结,以及 ...
零基础AJAX入门（含Demo演示源文件）
零基础AJAX入门(含Demo演示源文件) 作者:一点一滴的Beer 个人主页:http://www.cnblogs.com/beer 摘要:因为笔者的大四毕业设计是做WebGIS系统,用过Web版 ...
[html] 举例说明锚点定位有什么作用？
[html] 举例说明锚点定位有什么作用? 我能想象到的一种应用场景: 一.我们在做一个很长的网页时,需要在页面内做一个导航,点击导航里的链接不是新开一个窗口或者跳转到其他网址,而是跳转到当前页的某一 ...
微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
【MAX7800实现KWS20 demo演示】
[MAX7800实现KWS20 demo演示] 1. 概述 2. 关键字定位演示 2.1 构建固件: 2.2 选择板卡 2.3 MAX78000 EVKIT 2.3.1 MAX78000 EVKIT下 ...
移动端html锚点,vue实现锚点定位，移动端同样适用
本来首先想到的就是用a链接进行锚点跳转,但是a链接会产生新的路由,为了防止对项目产生影响就使用了js进行操控滚动条的滑动,下面是一个小demo! 一.html代码 {{item}} {{item}}/ ...
Autoware入门学习（三）——Autoware软件功能使用介绍（1/3）及demo演示
文章目录 1 Autoware 的官方 demo 演示 1.1 数据下载(点击链接or指令均可) 1.2 Demo 运行 2 Autoware 软件功能使用介绍(1/3) 2.1 Quick Star ...

mui 实现a锚点定位 (demo演示)【建议：仅作为参考】

mui 实现`<a>`锚点定位（演示） - `【建议：仅作为参考】`

`重要说明：本案例，改编自`“官方demo演示地址 · 点击了解详情”

重要说明：

效果 · 截图：

代码示下：

mui 实现a锚点定位 (demo演示)【建议：仅作为参考】相关推荐

最新文章

热门文章

mui 实现a锚点定位 (demo演示)【建议：仅作为参考】

mui 实现<a>锚点定位（演示） - 【建议：仅作为参考】

重要说明： 本案例，改编自“官方demo演示地址 · 点击了解详情”

重要说明：

效果 · 截图：

代码示下：

mui 实现a锚点定位 (demo演示)【建议：仅作为参考】相关推荐

最新文章

热门文章

mui 实现`<a>`锚点定位（演示） - `【建议：仅作为参考】`

`重要说明：本案例，改编自`“官方demo演示地址 · 点击了解详情”