2

我正在使用动画滚动到 id 功能，该功能非常适用于整个页面，移动到页面中具有特定 id 的不同元素。我希望能够做的是将滚动限制为高度为 450、宽度为 910 和 overflow-y:scroll 集的特定 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>

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

我喜欢这是多么简单，并且希望可以大部分维护（显然它会比现在更复杂）。如果它可以保留滚动到页面上任何位置的元素的功能，而且还具有使带有溢出的 div 的链接也只能滚动，那就太好了。提前感谢社区可能给我的任何帮助。

4

2 回答 2

3

你有没有尝试过这样的事情

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

你在哪里parent_id是带有溢出的特殊 div，.position()而是使用它，因为位置是相对于父元素而不是相对于页面。

于 2012-02-28T18:24:05.293 回答
0

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

$("#"+id).position().top

返回位于最底部元素上方的元素的负数。这是因为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');
}
于 2014-07-02T01:09:36.397 回答