JQuery定位:我可以滚动到正确的位置一次,但不能滚动两次
JQuery positioning: I can scroll to the right place once but not twice
我最近开始尝试在jQuery中模拟滚动到特定锚(太长了,读不下去了跳到锚会破坏页面的外部)。
虽然我在StackOverflow上发现的建议在第一次尝试向下滚动页面时有效,但我发现第二次尝试并不那么成功。
我可能已经考虑这个问题太久了,但我确实有一个基于我的困境的Fiddle:
http://jsfiddle.net/txns8bep/
var doThis = function() {
var parent = $('#crud');
var parentTop = $('#crud').offset().top;
var targetTop = $('#2').offset().top;
$(parent).animate({
scrollTop: targetTop// - parentTop
});
console.log('doThis() called. Went to '+targetTop+'-'+parentTop);
};
// works the first time
doThis();
// doesn't work the second time
setTimeout(doThis, 1000);
HTML(部分)如下:
<div id="crud" style="position:absolute;top:100px;bottom:0;overflow:scroll; border:1px solid red;">
<h1 id="1">Item #1</h1>Lorem ipsum....
<h1 id="2">Item #2</h1>Ab magnam...
<h1 id="3">Item #3</h1>Mollitia eius...
<!-- (h1[id=$]{Item #$}+lipsum)*10 -->
不过,这个问题不仅仅是关于帖子滚动。如果当前偏移顶部大于0,则任何滚动到相关区域的尝试都会受阻。
(也许只是咖啡因在说话,但我被难住了。)
答案就在我面前:scrollTop()
。我修改了动画功能如下,一切正常:
var newScrollTop = parent.scrollTop() + target.offset().top - parent.offset().top;
$(parent).animate({
scrollTop: newScrollTop
});
http://jsfiddle.net/txns8bep/1/
相关文章:
- Meteor Router数据函数被调用两次
- 从MySQL数据库中获取输入数据需要两次页面刷新
- Module.start()已激发两次
- Jquery点击事件必须点击两次
- Append元素在运行两次函数后不显示
- 防止双击执行两次jQuery post请求
- 我必须点击两次才能激活任何按钮操作(离子/角度)
- JQuery定位:我可以滚动到正确的位置一次,但不能滚动两次
- 滚动时加载更多 滚动速度时一次工作两次
- 无限滚动,$http GET触发两次
- 平滑滚动并使用 Firefox 上的 popState 返回按钮 - 需要单击两次
- 猫头鹰旋转木马,一次滚动两个项目
- 自定义滚动条jScrollPane在iframe中出现两次
- 无限滚动加载内容两次
- 无限滚动执行动作两次或两次以上
- 我的无限滚动附加两次Safari和复制
- jQuery滚动事件触发两次
- 滚动事件导致自定义事件触发两次(应该是一次)
- Ajax无限滚动功能触发两次
- JQuery在加载react js组件数据时触发两次滚动