玩转锚点:探索添加锚点的多种方法(包括a标签和JavaScript)
最编程
2024-08-02 14:37:34
...
以下效果全部是移动端测试,不过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(); 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>
注意事项:=>>这种方法和第二种方法比又多了一步查询节点的操作,但是和第一种方法比也是好了很多(前提是给锚点加事件)
4、使用js滚动的方式,可以参考这篇文章:=>>http://www.cnblogs.com/zxn-9588/p/7422827.html
5、使用window.location.hash = "#id值",这种方法会刷新页面,不建议考虑
6、使用两个a标签,通过href和name属性,类似=>> <a href="#1">关注我啊,关注我啊</a><a name="1">来了来了</a>,感觉凭空多了一个a标签,不好,可以直接舍弃
好了,那么这样的话,我们就可以根据不同的需求使用不同的锚点效果了,效果多多,任你选择啊。
转载请注明出处:=>>http://www.cnblogs.com/zxn-9588/p/8794615.html
上一篇: html锚点使用示例