ページの上からスクロールする前に、ページがアンカーに点滅する

Question

誰か助けてください。

私は1ページにいくつかの隠しセクションと、これらのセクションにリンクして表示する一連の他のページを持っています。もともと、ページはちょうどアンカーにまっすぐジャンプしましたが、ページを上からセクションにスクロールする場所にしました。問題は、ページがページの上部にジャンプしてからスクロールする前に、アンカーに少しジャンプしてしまうことです。私が見てきた

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

：

ここ

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

は、それがリンクしたページの一部である：ここで

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

が1ページである：ここでは

は私のコードです解決策を探し、e.preventDefault（）を試しました。偽を返すが、どちらもうまくいっていないし、他に何を試していいのかわからない。

Answer 1

私のコメントを詳しく説明すると、ブラウザは自動的に既存のアンカーに移動します。これを回避するには、実際には存在しないアンカーにリンクすることができますが、JSが要素を知るための十分な情報を保持しています。

これを行う最も簡単な方法は、一貫した最後の部分 "thisAnchor"、 "thatAnchor"、 "anyTextAnchor"でアンカーを使用することです。 （すべて修正後の「アンカー」があります）

次に「#this」にリンクし、JSを使用してポストフィックスの「アンカー」を追加して、アニメーションで使用する有効な要素を残しておくことができますステップによって無効な要素を持つブラウザ（およびそのための初期位置が設定されている）

ステップは、これは意味します：

• ID thisAnchor
• リンク
• http://example.com#thisへのあなたのJSのアペンドとアンカー要素を「アンカー」からcその後、

、コードでを使用することができますreate "thisAnchor"、このような何か：なしIDの変更と

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

代替、あなたはエイリアスのリストを持つことができますアンカーのために、例えば.com#aは#thisになります。以下の簡単な例：JSも読み込まれている前

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