添加錨點的幾種方式（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