我有一个div元素,里面有很多内容:
<div id="x" class="unhidden">
text and more divs
</div>
CSS类“未隐藏”包含:
display: block;
当我单击链接时,元素id ='x'变为class = hidden'槽javascript,其中包含:
display: none;
div元素现已隐藏。到目前为止,一切都很好。现在,我想返回并显示完整的
div='x'
并向下滚动到div id='x'
中的某个div。因此,当我单击“后退”按钮时,首先该类再次通过javascript变为
unhidden
,然后在相同的函数中运行此脚本:window.scroll(0, findPos(document.getElementById(GoTo)));
GoTo是我要向下滚动到的某个div的ID。使用此功能可以向下滚动:
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
该脚本确实找到了要去的位置,但没有向下滚动。
如果向下滚动脚本与隐藏/未隐藏部分分开,则也可以使用。但是这里不起作用,隐藏/显示部分会阻止某些内容。
有什么解决办法或想法吗?
最佳答案
我认为这是由于浏览器先执行了所有JS代码,然后才将控制权交还给呈现引擎-因此更改类实际上并没有使元素在您计算元素位置的代码处再次可见。已执行(未显示的元素没有任何位置)。
如果将整个window.scroll
调用包装到一个匿名函数中,并使用setTimeout
以最小的延迟执行该调用,则应该可以解决问题:
referenceToDivElement.className = "unhidden";
var targetElement = document.getElementById(GoTo);
window.setTimeout(function() {
window.scroll(0, findPos(targetElement));
}, 5);