Question

我有一页看起来像这样的东西（是的，我已经包含了scriptaculous javascripts，因为切换实际上确实有效）：

<html>

<div id="container">
    <div id="thing1" class="thing" >
       <p>Some visible stuff 1</p><a href="#" onclick="Effect.toggle('extra1');">More1</a>
       <div id="extra1" style="display:none;">
         <p>Some extra and initially invisible stuff</p>
       </div>
    </div>

    <div id="thing2" class="thing">
       <p>Some visible stuff 2</p><a href="#" onclick="Effect.toggle('extra2');">More2</a>
       <div id="extra2" style="display:none;">
         <p>Some extra and initially invisible stuff</p>
       </div>
    </div>

   <!-- 96 more entities of class="thing" -->

    <div id="thing99" class="thing">
       <p>Some visible stuff 99</p><a href="#" onclick="Effect.toggle('extra99');">More99</a>
       <div id="extra99" style="display:none;">
         <p>Some extra and initially invisible stuff</p>
       </div>
    </div>
</div>
</html>

当我点击位于页面底部的id =“thing99”的“More99”链接时，id =“extra99”的div会出现，但页面会自动显示页面滚动回到顶部。

当我点击顶部的“More1”链接时，它会一直聚焦在顶部。

无论如何，我可以让页面滚动回到顶部和/或将其重新聚焦回我刚刚点击的位置？我不想向后滚动，找出我刚刚看到的那个。

Answer 1

在return false;来电后尝试Effect.toggle();。

<a href="#" onclick="Effect.toggle('extra99'); return false;">More99</a>

这不是处理此问题的理想方法，但它应该可以解决您当前的问题。理想情况下，您将从HTML中删除所有Javascript，并取消所有onclick属性，处理远程Javascript块中的所有内容。

Answer 2

Jonathan＆amp; Tatu让我走上正轨。我试过“返回假”，并且它在某些时候起作用。

随着“返回虚假”概念的出现，我搜索了GOogle并偶然发现了this page的hrefs并返回false。

“＃”标签一直让我回到页面顶部。我尝试了没有“return false”的href =“”，并且它按照需要工作，但它也随机重新加载了页面。

以下解决方案给了我一贯的想法：

<a href="" onclick="Effect.toggle('extra99'); return false;">More99</a>

一切都按预期工作，没有随机页面重新加载。

div的长页面：使用Effect.toggle在底部展开div：页面滚动回到顶部

2 个答案: