使用一个链接激活两个jQuery函数

时间:2013-04-18 20:39:45

标签: javascript jquery html

我正在尝试执行以下操作:

  • 使用 slideToggle
  • 打开div
  • 使用 scrollTop
  • 将用户窗口移动到div的顶部
  • 然后在用户关闭div时基本上反转该过程。

我整个过程差不多完成了,但我遇到了一个问题。当我打开div时,我的窗口不会移动到div的顶部。但当我关闭div时,我的窗口会移动到我想要的位置。

这是我的jQuery代码:

// Find the location of a div (x, y)
function divLoc(object) {
var topCord = 0;

// If browser supports offsetParent
if(object.offsetParent) {
    do {
        topCord += object.offsetHeight;
    } 
    while (object === object.offsetParent);

    return topCord;
}
}

$("#open").click(function () {
    var newInfo = document.getElementById("newInfo");
    var location = divLoc(newInfo);
    $("#newInfo").slideToggle('slow', function() {
        $('html,body').animate({ scrollTop: location }, 2000);
    });
});

我在jsFiddle上传了一个问题的例子:Here

1 个答案:

答案 0 :(得分:5)

您需要更改幻灯片功能:

$("#newInfo").slideToggle('slow', function() {
  var self = $(this)       
  $('html,body').animate({ scrollTop: self.offset().top }, 2000);
});

http://jsfiddle.net/hSHz5/