添加锚点的几种方式（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();
                        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