Question

我有这样的链接：

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

和这样的div：

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

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

修改：

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

现在我想在此位置显示 test div ：scrollTop(20)+"px"

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

Answer 1

获取元素的精确滚动位置：

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

如果标题更改

，您将不必担心标题的高度

如果你添加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;
});

在这里小提琴：http://jsfiddle.net/sjmcpherso/5akh7va2/

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

1 个答案: