我正在使用这段代码来打开一个 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;
});
});
最佳答案
jquery.anchor.js
似乎有问题给我的图书馆 Uncaught TypeError: Cannot read property 'top' of null jquery.anchor.js:32
在 Chrome 14 中。我已将其注释掉,并将 open 函数替换为:
$("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 动画插件工作......
实际上是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 .
关于jQuery的scrollTop只能工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6417398/