在从页面顶部滚动之前，页面会闪烁以锚定

Question

有人请帮帮我。

我有一个页面上有几个隐藏的部分和一系列链接到并显示这些部分的其他页面。 最初页面直接跳到了锚点，但我把它转到了页面从顶部滚动到该部分的位置; 问题是页面在跳转到页面顶部然后滚动之前会短暂跳转到锚点。

这是我的代码：

function toggle(id) {
 var element = document.getElementById(id);
 var text = document.getElementById("arrow" + id);
   if (element) {
   var display = element.style.display;

   if (display == "none" || display == '') {
   element.style.display = "block";
  text.innerHTML = "▲";

  } else {
   element.style.display = "none";
   text.innerHTML = "▼";
       }
    }
 };

jQuery(document).ready(function() {
   jQuery(window.location.hash).show(); 

     if (window.location.hash) {
        setTimeout(function() {
            jQuery('html, body').scrollTop(0,0).show();
            jQuery('html, body').animate({
                scrollTop: jQuery(window.location.hash).offset().top
                -75}, 1000)
        }, 0);
   }
});

这是一页：

<p><a href="http://204.128.208.7/automated-transfers-users/#inventoryPriceMaintenance">Effect on Auto-Transfers</a></p>

以下是它链接到的页面的一部分：

<h4 class="blueToggle" onclick="toggle('inventoryPriceMaintenance')">An Incorrect Setting in Inventory Price Maintenance<a id="arrowinventoryPriceMaintenance">&#x25bc;</a></h4>
<div id="inventoryPriceMaintenance" class="hiddencontent">
<p style="margin-left: 2em; margin-bottom: .3em;">Navigate to the back-screen</p>
<a href="http://204.128.208.7/wp-content/uploads/auto-transfer-7.png"><img class="aligncenter" src="http://204.128.208.7/wp-content/uploads/auto-transfer-7.png" alt="" width="85%" height="85%" /></a>
<p style="text-align: justify; margin-left: 2em; line-height: 1.5em; margin-bottom: .625em;">The item will not be included on automatically generated transfers to a store if the second character in the fourth column (<strong>COMP</strong>) is…</p>

<ul style="margin-left: 5em; line-height: 1.5em;">
<li><strong>D</strong> = discontinued (an item cannot be transferred to a store at which it is discontinued, but it can be transferred from that store)</li>
<li><strong>S</strong> = special order</li>
<li><strong>X</strong> = item has been discontinued everywhere (only relevant at store 00)</li>
</ul>
<p style="text-align: justify; margin-left: 2em;">An item will not auto-transfer if it is not authorized at the specific store</p>
<p style="text-align: justify; margin-left: 5em; line-height: 1.5em; margin-top: -1em; margin-bottom: 0px">Go to the back-screen and see if the store is on the list (a list of authorized stores can also be found on the Inventory Inquiry screen)</p>
<h4 class="blueToggle" onclick="toggle('inventoryPriceMaintenance')" style="margin-top: .3em">Hide -</h4>
</div>

我找了一个解决方案，并尝试了e.preventDefault（）; 并且返回false，但两者都没有工作，我不知道还有什么可以尝试。

Answer 1

为了详细说明我的评论，浏览器将自动移动到任何现有的锚点。 为了解决这个问题，您可以链接到实际上不存在的锚点，但仍然可以为您的JS提供足够的信息来了解该元素。

最简单的方法是使用具有一致最后部分的锚点，“thisAnchor”，“thatAnchor”，“anyTextAnchor”。 （都有修复后的“锚”）

然后你可以链接到“#this”并使用JS添加后期修复“Anchor”，为你提供在动画中使用的有效元素，同时让浏览器保留一个无效元素（并为此设置初始位置）

这将意味着：

• ID为thisAnchor的锚元素
• 链接到http://example.com#this
• 你的JS附加“Anchor”来创建“thisAnchor”，然后可以使用它

在代码中，这样的事情：

 $(document).ready(function() { // This is just for the example, as I can't add an anchor to a stack snippet window.location.hash = 'this'; // if (window.location.hash) { setTimeout(function() { // Here we add the common post-fix "Anchor" to any anchor link passed in var scrollTo = $(window.location.hash + "Anchor").offset().top; $('html, body').animate({ scrollTop: scrollTo }, 1000) }, 200); } }); 

 .container { height: 4000px; padding-top: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <!-- Use anchors with a common post-fix such as "Anchor" --> <a id="thisAnchor">Anchor</a> </div> 

如果没有ID更改，您可以拥有锚点的别名列表，例如.com#a转到#this 。 简单示例如下：

 $(document).ready(function() { // This is just for the example, as I can't add an anchor to a stack snippet window.location.hash = 'a'; // if (window.location.hash) { setTimeout(function() { var scrollTo = 0; // Lookup which element this # relates to switch(window.location.hash){ case "#a": scrollTo = $("#this").offset().top; break; case "#b": scrollTo = $("#that").offset().top; break; default: break; } $('html, body').animate({ scrollTop: scrollTo }, 1000) }, 200); } }); 

 .container { height: 4000px; padding-top: 500px; } a{ display: block; margin-bottom: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <!-- Any existing anchor --> <a id="this">This Anchor</a> <a id="that">That Anchor</a> </div>