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

Posted 2023-05-09

【中文标题】在从页面顶部滚动之前，页面会闪烁以锚定

【英文标题】：Page flashes to anchor before scrolling from top of the page

【发布时间】：2017-01-09 19:38:45

【问题描述】：

请有人帮帮我。

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

这是我的代码：

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"    /></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，但都没有工作，我不知道还有什么可以尝试的。

【问题讨论】：

浏览器将在 JS 加载之前移动到锚点位置。我不相信你可以用 JS 取消它，尽管你可以使用查询字符串或不存在的锚来解决它（然后 JS 可以计算出它们的关系）

什么是不存在的锚？

例如在你的页面上你有#thisAnchor，但你只是链接到.com#this，然后JS会做类似window.location.hash + "Anchor"的事情来获得真正的锚。这样浏览器不会移动页面（#this 不存在），但你的 JS 仍然可以移动到它，因为它知道添加一致的最终部分。

【参考方案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>

【讨论】：

感谢您的回复，但不幸的是，此方法不起作用，因为添加后修复会破坏我的切换功能。

@Erin 如果没有看到这个“切换功能”，我真的无能为力，但你可以通过列出已知锚点及其关联元素来做类似的事情，但这会变得更加混乱在 JS 中。 （.com#a 转到“#this”，.com#b 转到 #that 等）但是这不需要对当前 ID 进行任何更改

我添加了切换部分的代码和两个页面的 html 代码。

@Erin 我添加了一个版本，它不需要您在页面上更改您的 ID（尽管仍然需要不同的“链接”），这是否解决了问题？恐怕如果你不能改变链接或ID，我想不出任何办法来停止初始定位。

最初我也无法让第二种方法工作，但我会继续修补，看看我是否能让它工作。非常感谢您的帮助，非常感谢。