使用页面跳转锚点的正确方法是什么？答案

【问题标题】：What is the correct way to use page jump anchors?使用页面跳转锚点的正确方法是什么？
【发布时间】：2019-04-08 15:36:57
【问题描述】：

我想制作一个导航面板，其中包含跳转锚点作为链接。如何使锚链接转到下一个网页并跳转到其分配的锚点？

我尝试在网页中分配一个唯一的锚点以匹配导航面板中的锚点。到目前为止，链接将导航到另一个网页并跳转到其锚点一次。

那么，唯一有效的链接是那些仅在当前页面上找到锚点的链接，即使这些链接告诉他们转到另一个页面并找到它们对应的锚点。

以下是包含在 .php 文件中的代码，以便整个站点的导航是相同的。

<html>
        <ul>
            <li><a href="#"><h2>About</h2></a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/" id="closea"><h2>Prints</h2></a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/" id="closeb"><h2>Archival</h2></a></li>
            <li><a href="#"><h2>VHS &amp; Reels</h2></a></li>

<li><a href="#">Contact Us</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj00" id="closec" target="_parent">Standard 1HR</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj05" id="closed">Shoebox Scan</a></li>
            <li><a href="#">Tape to DVD</a></li>

<li><a href="#">Blog</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj01" id="closee">Large Format</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj06" id="closef">Single Scan</a></li>
            <li><a href="#">Repairs</a></li>

<li><a href="#">Find Us</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj02" id="closeg">Mounting</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj07" id="closeh">Slide (Positive) Scan</a></li>
            <li><a href="#">Film to DVD</a></li>

<li><a href="#">Hire Us!</a></li>
            <li><a href="http://weathersbyink.com/hikc/prints/index.php#pj03" id="closei">Lamination</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj08" id="closej">Negative Scans</a></li>
            <li><a href="#">Cassette to CD</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="http://print.sayhikc.com/">Order Online</a></li>
            <li><a href="http://weathersbyink.com/hikc/archive/index.php#pj09" id="closek">CD/DVD Copy</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#"><h2>Film</h2></a></li>
            <li><a href="#"><h2>Restorations</h2></a></li>
            <li><a href="#"><h2>Special</h2></a></li>
            <li><a href="#"><h2>Events</h2></a></li>

<li><a href="#">Develop Only</a></li>
            <li><a href="#">Photoshop I</a></li>
            <li><a href="#">Canvas Prints</a></li>
            <li><a href="#">Classes</a></li>

<li><a href="#">Single Set</a></li>
            <li><a href="#">Photoshop II</a></li>
            <li><a href="#">Aluminum</a></li>
            <li><a href="#">1-on-1 Consultation</a></li>

<li><a href="#">Double Set</a></li>
            <li><a href="#">Small Projects</a></li>
            <li><a href="#">Metalic</a></li>
            <li><a href="#">Sales</a></li>

<li><a href="#">Black &amp; White</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">Wood Transfer</a></li>
            <li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">&nbsp;</a></li>
        </ul>



===== Section: Page A ===========================================



<div class="prints01">
    <h3>Mounting</h3>
    <p>Add a unique spin to your image!</p>
    <ul>
    <li>High-quality, crisp color printing</li>
    <li>24 Hour Turn-Around</li>
    <li>Durable and Long-Lasting</li>
    <li>Professional, personal application</li>
    <li>Available in Matte and Glossy Finish</li>
    </ul>
<!-- end prints01 --></div><a id="pj03"></a>



===== Section: Page B ===========================================



<div class="prints01" style="margin-top: 12%">
    <h3>Negative Scans</h3>
    <p>Lamination is the ideal method for adding years to the life of your displayed images and graphics.</p>
    <ul>
    <li>High Gloss</li>
    <li>Maintains Image contrast &amp; Saturation</li>
    <li>Adds UV Protection</li>
    <li>Easily Cleanable</li>
    <li>24 Hour Turn-Around</li>
    </ul>
<!-- end prints01 --></div><a id="pj09"></a>

</html>

我希望链接从导航面板导航到页面 A 和 B 上的目的地。

这可以在http://weathersbyink.com/hikc现场找到

【问题讨论】：

听起来你可能有一些 javascript 影响了它们上的事件。只要 url 哈希匹配一个元素，没有 javascript 就应该可以正常工作
你是对的！我的 js 中有一行阻止了默认行为，非常感谢！！事件/preventDefault();`
是的……这样就可以了

标签： javascript html anchor

【解决方案1】：

我刚刚找到了这个答案。

“我在一个 w3school 引导模板中发现了这个，该模板包含这个命令作为一个块的一部分，可以很好地滚动到主题标签。一旦我把它注释掉，链接就可以正常工作了。”

https://stackoverflow.com/a/40722833/8836444

谢谢@charlietfl 和@mike ursitti

【讨论】：