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 = "&#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（）;并且返回false，但两者都没有工作，我不知道还有什么可以尝试。

Answer 1

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

最简单的方法是使用具有一致最后部分的锚，＆＃34; thisAnchor＆＃34;，＆＃34; thatAnchor＆＃34;，＆＃34; anyTextAnchor＆＃34;。（所有人都有后期修复＆＃34; Anchor＆＃34;）

然后你可以链接到＆＃34; #this＆＃34;并使用JS添加post-fix＆＃34; Anchor＆＃34;，为您提供在动画中使用的有效元素，同时使浏览器保留无效元素（并因此设置初始位置）

一步一步这意味着：

ID为thisAnchor
指向http://example.com#this
你的JS附加了＆＃34; Anchor＆＃34;创建＆＃34; thisAnchor＆＃34;，然后可以使用

在代码中，这样的东西：

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: