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

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

为了详细说明我的 cmets，浏览器会自动移动到任何现有的锚点。为了解决这个问题，您可以链接到实际不存在的锚点，但仍然携带足够的信息让您的 JS 知道该元素。

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

然后您可以链接到“#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>