Question

我正在使用动画滚动来识别功能，该功能对整个页面非常有效，可以移动到页面中具有特定ID的不同元素。我希望能够做的是将滚动限制为特定的div，其高度为450，宽度为910，overflow-y：scroll set。

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

然后输入一个链接：

<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a>

此页面中的示例http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/comment-page-2/#comment-41618

我喜欢这是多么简单，并且希望大部分都能保持这种状态（显然它会比现在更加复杂）。如果它能够保持滚动到页面上任何位置的元素的功能，那么它会很棒，但是也有一个链接使得带溢出的div也只能滚动。提前感谢社区可以给我的任何帮助。

Answer 1

你有没有试过这样的东西

function specific_goToByScroll(parent_id, id){
    $("#"+parent_id).animate({scrollTop: $("#"+id).position().top}, 'slow');
}

parent_id是溢出的特殊div，并使用.position()代替，因为position相对于父元素而不是相对于页面。

Answer 2

ShadowScripter的答案很接近并且是一个很好的起点，但是你会注意到如果你滚动到最底部的位置，那么查询

$（＆＃34;＃＆＃34 + ID）。.POSITION（）顶

为位于最底部元素上方的元素返回负数。这是因为 position（）。top 返回一个相对于父级顶部的值，而在溢出div中，相对顶部位置可能小于父级顶部的位置＆＃39;顶部。

一种解决方案是做一些考虑视口大小的额外数学。

就我的目的而言，在页面加载完成后简单记录所有顶部更容易，然后从数据结构中获取位置：

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');
}

div中的动画滚动与溢出滚动

2 个答案: