js模擬html錨鏈接

當我們在html頁面內部進行錨點內部鏈接時，錨點會將目標定位到頁面頂部，而某些情況下，我們的需求可能除了內部鏈接之外，還要講錨點目標置於特定位置。比如下面這個例子

可以看到，這個例子中，由於頂部盒子fixed定位，這種情況下，我們內部鏈接的時候，對應內容置頂到窗口頂部，會被頂部盒子遮住一部分內容。

怎么辦呢？

憋慌，如果你熟悉js，那我們可以輕松的搞定這個問題！

原理很簡單，只需要點擊標簽的時候，讓滾動條滾動到你想定位的位置就好了。

demo如下：

html代碼：

<ul class="ul">
      <li class="li on" data-info="StrokeFeature">行程特色</li>
      <li class="li" data-info="ReferenceTravel">參考行程</li>
      <li class="li" data-info="cost">費用包含</li>
      <li class="li" data-info="exclusive">不含項目</li>
</ul>
<div id="StrokeFeature">……</div>
<div id="ReferenceTravel">……</div>
<div id="cost">……</div>
<div id="exclusive">……</div>

JavaScript代碼：

var list = document.querySelectorAll(".li");
// alert(list.length);
for (var i = 0; i < list.length; i++) {
    list[i].onclick = function() {
        for (var k = 0; k < list.length; k++) {
            list[k].className = "li";
        };
        // alert(StrokeFeature.offsetTop);
        this.className = "li on";
        var attr = this.getAttribute("data-info");
        var classDiv = document.querySelector("#" + attr);
        // 滾動條滾動到對應標簽內容
        window.scrollTo(0, classDiv.offsetTop - StrokeFeature.offsetTop);
    }
};

var StrokeFeature = document.querySelector("#StrokeFeature"),
    ReferenceTravel = document.querySelector("#ReferenceTravel"),
    cost = document.querySelector("#cost"),
    exclusive = document.querySelector("#exclusive");

是不是很簡單呢？！

其實一開始，我用了個很蠢的方法，就是直接設置滾動條的高度

這個方法雖然解決了定位的問題，但是會帶來一個影響，如下圖：

當你在同一個頁面還需要用到onscroll事件的時候，上面的方法會將scrollTop的值設置為常量值。如果你需要用到scrollTop進行一些邏輯判斷，那么問題就出現了……

好了，說了這么多，其實只想說明一個方法，就是window.scrollTo(x,y);關於此方法的更多詳解，請自行百度，(*^__^*) 嘻嘻……

最后，在線demo