页面跳转锚的正确使用方法是什么？
[英]What is the correct way to use page jump anchors?
问题描述
I want to make a navigation panel that holds jump-to anchors as the links.
我想制作一个导航面板，将跳转到锚点作为链接。 How do I make the anchor links go to the next webpage and jump to it's assigned anchor?如何使锚链接转到下一个网页并跳转到其指定的锚？
I've tried assigning a unique anchor in the webpages to match those in the navigation panel.我尝试在网页中分配一个唯一的锚点以匹配导航面板中的锚点。 So far, the links will navigate to another webpage and jump to its anchor, once.到目前为止，链接将导航到另一个网页并跳转到其锚点一次。
Then, the only links that work are those with anchors only found on the current page, even though the links tell them to go to another page and find them corresponding anchors.然后，唯一有效的链接是那些只在当前页面上找到锚点的链接，即使链接告诉他们去另一个页面并找到相应的锚点。
The following is code contained in a .php file so that the navigation is the same across the site.以下是包含在 .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 & 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="#"> </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="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </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 & White</a></li>
<li><a href="#"> </a></li>
<li><a href="#">Wood Transfer</a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </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 & 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>
I expect the links to navigate from the navigation panel to its destination on pages A and B.我希望链接从导航面板导航到页面 A 和 B 上的目的地。
This can be found live at http://weathersbyink.com/hikc这可以在http://weathersbyink.com/hikc上找到
1 个解决方案
解决方案1
0 2019-04-08 15:54:55
I just found this answer.我刚刚找到了这个答案。
"I found this in a w3school bootstrap template that included this command as part of a block that makes a nice scroll to the hashtag. Once I commented it out, the links worked fine." “我在 w3school 引导程序模板中发现了这一点，该模板将此命令作为块的一部分，可以很好地滚动到主题标签。一旦我将其注释掉，链接就可以正常工作。”
https://stackoverflow.com/a/40722833/8836444 https://stackoverflow.com/a/40722833/8836444
Thank you @charlietfl and @mike ursitti谢谢@charlietfl 和@mike ursitti
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.