Question

我正在使用这段代码打开一个div并向下滚动它。它工作得很好，但只有我第一次使用它，即使在页面刷新它也不会再次工作。有谁知道为什么会这样？提前谢谢！

以下是网址（www.patrickorr.ca）

$(document).ready(function() {
$("div.ftropen")
    .click(function(){
        $("div#connect").animate({height: "500px" }, "fast");                                              
        $("div#ftrconnect").fadeOut("fast");  //hide connectbtn
        $("div#ftrhide").fadeIn("fast");  //show hidebtn
        $("#connect").scrollTop($("#connect").scrollTop() + 500);
    return false;
});
$("div.ftrclose")
    .click(function(){
        $("div#connect").animate({height: "0px" }, "fast");                                            
        $("div#ftrhide").fadeOut("fast");  //hide hidebtn
        $("div#ftrconnect").fadeIn("fast");  //show connectbtn
    return false;
});
});

Answer 1

在Chrome 14中jquery.anchor.js库提供Uncaught TypeError: Cannot read property 'top' of null jquery.anchor.js:32似乎存在问题。我已将其评论出来并将 open 函数替换为：< / p>

$("div.ftropen").click(function(){
    $("div#connect").animate({height: "500px" }, "fast", function() {
        $("body").scrollTop( $("#connect").position().top);
    });                                    
    $("div#ftrconnect").fadeOut("fast");  //hide connectbtn
    $("div#ftrhide").fadeIn("fast");  //show hidebtn
    return false;
});

将正文滚动到<div id="connect">

的顶部

~~我会看看我是否可以让锚点动画插件工作......~~

实际上，Anchor Slider插件似乎完全干扰了您的<div>点击事件。首先发生<a>点击并消耗该事件。我认为您需要决定使用Anchor Slider插件为您的代码中的“滚动到”或jQuery animate()设置动画。

修改：如果您删除jquery.anchor.js脚本，请使用以下目标

<div id="connect" style="height:0px; display:block;"><a style="display:block;margin-top:500px;height:100px;" id="target" name="target">f</a></div>

和这个JavaScript：

$(document).ready(function() {
    $('div.ftropen').click(function(event){
        $('div#connect').animate({height: '500px' }, 'fast', function() {
            $('body').animate({scrollTop : $('#target').position().top + 500}, 700);
        });
        $('div#ftrconnect').fadeOut('fast');  //hide connectbtn
        $('div#ftrhide').fadeIn('fast');  //show hidebtn
        event.stopPropagation();
        return false;
    });
    $('div.ftrclose')
        .click(function(){
            $('div#connect').animate({height: '0px' }, 'fast');
            $('div#ftrhide').fadeOut('fast');  //hide hidebtn
            $('div#ftrconnect').fadeIn('fast');  //show connectbtn
        return false;
    });
});

在<a id="target">高度动画完成时动画滚动到 <div>。

编辑2： Added a demo。

Answer 2

而不是

    $("body").animate({

使用以下

    $("html:not(:animated),body:not(:animated)").animate({

Mozilla和Webkit浏览器对BODY和HTML的处理方式不同。所以掩盖两者都会有所帮助。还介绍：not（：animated）声明。滚动到位置的动画的JS最终将会像......

    $('#DIV a[href^=#]').click(function(e) {
       e.preventDefault();
       var h = $(this).attr('href');
       $("html:not(:animated),body:not(:animated)").animate({ scrollTop: $(h).offset().top }, 1200);
    });

jQuery scrollTop只能运行一次

2 个答案: