动画滚动div与溢出滚动
问题描述:
我正在使用id功能的动画滚动,非常适合整个页面,在页面中移动到具有特定ID的不同元素。我希望能够做到的是将滚动限制为具有450的高度,910的宽度和overflow-y:scroll set的特定div。动画滚动div与溢出滚动
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
,然后投入链接:此页面
<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a>
我怎么样简单,这是,并希望能够大多维持(显然这将是更多涉及现在的情况)。如果它能够保持滚动到页面任何位置的元素的功能,但也有一个链接使得带有溢出的div也仅滚动,那将会很棒。预先感谢社区可能会给我的任何帮助。
答
你有没有尝试过这样的事情
function specific_goToByScroll(parent_id, id){
$("#"+parent_id).animate({scrollTop: $("#"+id).position().top}, 'slow');
}
凡parent_id
是你溢特别div,并使用.position()
而是因为位置是相对父元素,而不是相对于页面。
答
ShadowScripter的答案是接近,是一个很好的起点,但你会发现,如果您滚动至最低的位置,查询
$(“#” + ID).POSITION()。顶部
返回位于最底部元素上方的元素的负数。这是因为position()。top会返回一个相对于父级顶部的值,而在溢出div中,相对*位置可能会小于父级*顶部。
一个解决方案是做一些额外的数学计算视口的大小。
对于我而言,这是比较容易简单地记录所有的顶部,当网页加载完成,然后抓住从数据结构中的位置:
var anchors = ['target01', 'target02', 'target03'];
var positions = {};
window.onload = function() {
for (var i = 0; i < anchors.length; i++) {
var id = anchors[i];
positions[id] = $("#" + id).position().top;
}
};
function scrollInOverflowDiv(parentID, id) {
var pos = positions[id];
$("#" + parentID).animate({scrollTop: pos}, 'slow');
}
它不工作。 – Codii 2012-11-14 16:49:54