Question

最初，我在页面上有一个父div，位于第一个折页上，内部还有150个div，每个div都有一个锚标记名称。然后，我可以使用，它将div移到父级的顶部。一切都好。但是...

我现在将div放到屏幕中间，进入下一个“折叠”。现在，当我在javascript中使用“ location.href ='＃name'”时，是的，它会将div移至父级的顶部...而且还将屏幕向上移动，以使父级div位于页面顶部，（即，它滚动屏幕，使第一折的下部位于屏幕顶部，父div位于顶部位置栏的下方）

<div parent>
    <div child id="jmp_1"><span><div style="font-family:Arial">The Lazy Dog ...</div><br><input type="radio" name="fntChoice" id="fntSel_1"><label for="fntSel_1" >Arial</label></span></div>
    <div child></div>
    <div child></div>
    ...
    ..
    .
</div>

每个子div都以字体样式显示“懒狗”短语-总共约150 div（因此它们的高度不同；我已通过编程方式更改了字体大小，使其适合设置的宽度）

因此，如果外部程序使用（例如）“ Cracked Johnnie”字体，则我想更改div bacground颜色（完成），然后将该div移至父div的顶部，以便立即可见，但不移动整个页面的位置。

我感觉这与命名父div有关，然后使用诸如“ document。 show .location.href ='＃jump_to” '“或” document.getElementById（'show'）。location.href ='jump_to'“”我确实想知道“ scrollTo” ...但div是高度可变的，因此不能简单地向下滚动X * pixels。也许“捕获”了窗口的位置，进行了跳转，然后将页面重置为其原始位置，但是随着页面上下反弹，这看起来会有些毛病。

**我必须将其括在中，因为
否则无法正常工作，并且标签显示在输入单选按钮的下方而不是旁边。哦，在没有人告诉我之前，div代码更加复杂。我在这里简化了它，所以您仍然可以了解我在做什么

Answer 1

对于遇到类似困境的人，这是我最终解决它的方法：

 <div> 
 <a href="jmp0"></a><div>...</div> 
 <a href="jmp1"></a><div>...</div> 
 .. 
 .
 </div>
 
 location.href='#jmp'+x // x is number to jump to
 window.scrollTo(0,0)

首先，将数字以编程方式添加到href中。当脚本到达该行时，它将页面加载到浏览器中，并且屏幕向上滚动，以便jump元素位于屏幕顶部。下一行代码将页面再次向下滚动，以使屏幕位于其原始位置（这两个动作执行得如此之快，您看不到上下移动...它只是使＃部分显示在浏览器窗口中）< / p>

要注意的一件事：仅当屏幕通常为“未滚动”状态时，此方法才有效（即，没有使用滚动条）。如果您跳至该元素的位置在页面的下方，则如果它继续跳至该页面，则可能看起来很奇怪。屏幕顶部。在这种情况下，您需要在跳转之前找到屏幕坐标，然后使用scrollTo重新加载这些坐标。

将div移到父div的顶部

1 个答案: