动画滚动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>

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

我怎么样简单，这是，并希望能够大多维持（显然这将是更多涉及现在的情况）。如果它能够保持滚动到页面任何位置的元素的功能，但也有一个链接使得带有溢出的div也仅滚动，那将会很棒。预先感谢社区可能会给我的任何帮助。

来源

2012-02-28 loriensleafs

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

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

凡parent_id是你溢特别div，并使用.position()而是因为位置是相对父元素，而不是相对于页面。

来源

2012-02-28 18:24:05 ShadowScripter

它不工作。 – Codii 2012-11-14 16:49:54

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

来源

2014-07-02 01:09:36 Rjak

动画滚动div与溢出滚动

回答

相关问题