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