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

我有这样的链接：

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

和这样的div：

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

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

编辑：

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

现在，我要在此位置显示测试div ： scrollTop(20)+"px"

应该注意的是，我有10 div （而不仅仅是test div） ，无论如何我都需要一种优化的方法。 我认为使用$(#one) ， $(#two) ，...没有优化。

使用以下命令获取元素的确切Scroll位置：

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;
});

在这里提琴： :

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

问题描述

1楼