添加锚点的⼏种⽅式（a标签、js）以下效果全部是移动端测试，不过PC端也没问题
1、a标签和id配合（1rem=50px）
<style type="text/css">
div {
height: 4rem;
}
div:nth-of-type(2n) {
background: #0083E0;
}
div:nth-of-type(2n+1) {
background: #2AC845;
}
</style>
<a href="#a01">aaa</a>
<a href="#a02">bbb</a>
<a href="#a03">ccc</a>
<a href="#a04">ddd</a>
<a href="#a05">eee</a>
<a href="#a06">fff</a>
<div id="a01">俺是aaa</div>
<div id="a02">俺是bbb</div>
<div id="a03">俺是ccc</div>
<div id="a04">俺是ddd</div>
<div id="a05">俺是eee</div>
<div id="a06">俺是fff</div>
<div>凑数</div>
<div>凑数</div>
<div>凑数</div>
<div>凑数</div>
注意事项：=>>这种锚点的跳转效果基本上没啥问题，但是⼀旦给锚点加上了事件，抱歉，它就会抛锚了。
2、使⽤location.href="#id值"
<a href="javascript:void(0);" data-url = "01">aaa</a>
<a href="javascript:void(0);" data-url = "02">bbb</a>
<a href="javascript:void(0);" data-url = "03">ccc</a>
<a href="javascript:void(0);" data-url = "04">ddd</a>
<a href="javascript:void(0);" data-url = "05">eee</a>
<a href="javascript:void(0);" data-url = "06">fff</a>
<div id="a01">俺是aaa</div>
<div id="a02">俺是bbb</div>
<div id="a03">俺是ccc</div>
<div id="a04">俺是ddd</div>
<div id="a05">俺是eee</div>
<div id="a06">俺是fff</div>
<div>凑数</div>
<div>凑数</div>
<div>凑数</div>
<div>凑数</div>
<script type="text/javascript">
mui("body").on("tap","a",function () {
var thisUrl = $(this).attr("data-url");
switch (thisUrl){
case "01":
location.href="#a01";
break;
case "02":
location.href="#a02";
break;
case "03":
location.href="#a03";
break;
case "04":
location.href="#a04";
break;
case "05":
location.href="#a05";
break;
case "06":
console.log("00001");
location.href="#a06";
break;
default:
break;
}
})
</script>
注意事项：=>>这种效果就是通过事件添加锚点的，所以加事件并不会影响锚点效果，缺陷就是本来html很简单就能实现的，结果要在js⾥写上⼀⼤段，可以作为参考考虑。
3、使⽤js的scrollIntoView()⽅法
<a href="javascript:void(0);" data-url = "01">aaa</a>
<a href="javascript:void(0);" data-url = "02">bbb</a>
<a href="javascript:void(0);" data-url = "03">ccc</a>
<a href="javascript:void(0);" data-url = "04">ddd</a>
<a href="javascript:void(0);" data-url = "05">eee</a>
<a href="javascript:void(0);" data-url = "06">fff</a>
<div id="a01">俺是aaa</div>
<div id="a02">俺是bbb</div>
<div id="a03">俺是ccc</div>
<div id="a04">俺是ddd</div>
<div id="a05">俺是eee</div>
<div id="a06">俺是fff</div>
<div>凑数</div>
<div>凑数</div>
<div>凑数</div>
<div>凑数</div>
<script type="text/javascript">
mui("body").on("tap","a",function () {
var thisUrl = $(this).attr("data-url");
switch (thisUrl){
case "01":
$("#a01")[0].scrollIntoView();
break;
case "02":
$("#a02")[0].scrollIntoView();
href标签怎么用
break;
case "03":
$("#a03")[0].scrollIntoView();
break;
case "04":
$("#a04")[0].scrollIntoView();
break;
case "05":
$("#a05")[0].scrollIntoView();
break;
case "06":
console.log("00001");
$("#a06")[0].scrollIntoView();
break;
default:
break;
}
})
</script>
注意事项：=>>这种⽅法和第⼆种⽅法⽐⼜多了⼀步查询节点的操作，但是和第⼀种⽅法⽐也是好了很多（前提是给锚点加事件）
5、使⽤window.location.hash = "#id值"，这种⽅法会刷新页⾯，不建议考虑
6、使⽤两个a标签，通过href和name属性，类似=>>  <a href="#1">关注我啊，关注我啊</a><a name="1">来了来了</a>，感觉凭空多了⼀个a标签，不好，可以直接舍弃
好了，那么这样的话，我们就可以根据不同的需求使⽤不同的锚点效果了，效果多多，任你选择啊。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。