页面在从页面顶部滚动之前会闪现到锚点位置

Question

页面在从页面顶部滚动之前会闪现到锚点位置

3

有人可以帮助我吗？

我有一个页面，其中有几个隐藏的部分和一系列链接到这些部分并显示它们的其他页面。最初，该页面直接跳转到锚点，但我将其改为从顶部滚动到该部分；问题是，在跳转到页面顶部并滚动之前，页面会短暂地跳转到锚点。

以下是我的代码：

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 = "&#9650;";

  } else {
   element.style.display = "none";
   text.innerHTML = "&#x25bc;";
       }
    }
 };

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();和return false，但都没有起作用，我不知道还有什么其他的尝试方法。

- Erin

3

在 JavaScript 加载之前，浏览器将移动到锚点位置。我认为您无法使用 JS 取消它，但是您可以使用查询字符串或不存在的锚点（然后 JS 可以计算它们所关联的内容）来解决此问题。 - DBS

不存在的锚点是什么？ - Erin

在您的页面上有#thisAnchor，但您只链接到.com#this，然后JS执行类似于window.location.hash + "Anchor"的操作以获取真正的锚点。这样浏览器就不会移动页面（#this不存在），但是您的JS仍然可以移动到它，因为它知道要添加一致的最终部分。 - DBS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DBS · Answer 1

为了详细说明我的评论，浏览器将自动移动到任何现有的锚点。为了避免这种情况，您可以链接到实际不存在的锚点，但仍然携带足够的信息供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>