javascript - 当我点击链接时，div 将如何显示在垂直坐标 20px 中

Question

我有一个这样的链接:

<a href="#test">click</a>

和这样的 div:

<div id="test">Hello world ...!</div>

当我单击该链接时，它会显示页面 (scrollTop=0) 顶部的 div。现在我有一个标题(固定的)，标题的高度是 20px。那么，当我单击链接时，它怎么可能向我显示 div 二十像素？

---

编辑:

这是我的网址:www.example.com/about#test

现在我想在这个位置显示test div:scrollTop(20)+"px"

应该注意的是，我有 10 个 div (不仅仅是测试 div)，无论如何我需要一个优化的方法。我认为使用 $(#one) , $(#two) , ... 没有优化。

Answer 1

获取元素的确切滚动位置:

var destination = $('#test').offset().top;

那么你就不用担心header的高度发生变化了

如果你添加 jQuery UI，你可以做一个很好的动画来滚动到元素，就像这样:

$("html,body").animate({scrollTop: destination}, 600, "easeOutExpo", function(){});

完整代码:

$('a[href=#test]').on('click',function() {
     var destination = $('#test').offset().top;       
     $("html,body").animate({scrollTop: destination}, 1000, "easeOutExpo", function(){});
    return false;
});

在这里 fiddle :http://jsfiddle.net/sjmcpherso/5akh7va2/