HTML - link to open page, then to anchor on that page
Question
I'm working on a fairly extensive local website. It is not on a web server, and I am more or less restricted to HTML and JavaScript.
I have a side navigation menu on all the pages that is called with this statement:
<script type="text/javascript" src="menu/menu.js"></script>
menu.js is essentially a list of links like this:
document.write("<a href='page5.html#part1'>Part 1</a>");
In place on all the pages is a sticky header script that is making linking to anchors cumbersome. If you're currently on the page the link is linking to and ABOVE the anchor the link is linking to, it works fine. But if you're currently below the anchor on the same page, it gets glitched up. It doesn't take you to where it should.
There's probably another way to do it, but I feel like an easy-to-implement solution would be to create a link that first opened the page at the top, and THEN took you to the anchor.
I tried using @Qwerty's solution from this question ([ Force page reload with html anchors (#) - HTML & JS ), but it didn't work. I tried this:
document.write("<a href='page5.html#part1' onclick='location.reload()'>Part 1</a>");
I'm guessing it didn't work because of it being local and/or because of the link being read from a JS file.
Example For simplicity's sake, let's say there are 3 pages on the site and each page has 3 anchors on it. I want this external JS menu to be on and work on all pages. It has these links:
page1.html#part1
page1.html#part2
page1.html#part3
page2.html#part1
page2.html#part2
page2.html#part3
page3.html#part1
page3.html#part2
page3.html#part3
2 answers
solution1
0 2016-11-16 22:52:17
This may either be brutally irrelevant to your question or give you an idea, how your app could be structured better. To handle your navigation needs, you don't need Javascript. But you can add it to the mix to improve this solution with nice gimmicks.
<html> <head> <title>one-page-app</title> <style> .pages { display: none; } .pages:target { display: block; } </style> </head> <body> <nav> <p>Main Menu:</p> <a href="#home">Home</a> <a href="#faq">FAQ</a> <a href="#external">External content (other file)</a> </nav> <a name="home"></a> <div id="home" class="pages"> <h1>Home</h1> <p>Hi. Check <a href="#faq">FAQ</a> to see how it's working.</p> </div> <a name="faq"></a> <div id="faq" class="pages"> <h1>FAQ</h1> <ul> <li> <h2>How does it work?</h2> <p>The magic of the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target">:target pseudo-class in CSS</a>.</p> </li> <li> <h2>What if I have more content?</h2> <p> I've worked with 2-3 MB html files without a problem. That's when smartphone browsers were really choking. ;) For local pages, loading time is no issue after all.</p> </li> <li> <h2>What about REALLY old browsers?</h2> <p>They will see all the content at once, but due to the anchors, the main menu will still work. Add "back to top" links to the pages if you want.</p> </div> <a name="external"></a> <iframe id="external" class="pages" src="http://google.com"></iframe> </body> </html>
EDIT - after question-edit:
If you want to keep your current structure, you could just do:
<a name="page1_1"></a>
<iframe id="page1_1" class="pages" src="page1.html#part1"></iframe>
<a name="page1_2"></a>
<iframe id="page1_2" class="pages" src="page1.html#part2"></iframe>
and so on.
solution2
0 2016-11-16 23:12:10
The Snippet below is for ease of reference there's more involved with this than what is in the Snippet. If you like a live demonstration go to this PLUNKER .
The first page must be index.html as a requirement of the website, but you may name your pages however you want on your PC. Keep in mind the links do not include index.html because I'm too lazy to include it, it would mean writing code that wouldn't be useful for you.
// Code goes here var pages = 5; var parts = 3; var pg = []; var pt = []; var menu = document.getElementById('menu'); var i, j; for (i = 0; i < pages; i++) { var page = 'page' + (i+1); pg.push(page); for (j = 0; j < parts; j++) { var part = 'part' + (j+1); pt.push(part); var url = pg[i] + '.html#' + pt[j]; var anchor = document.createElement('a'); anchor.href = url; anchor.textContent = 'Page ' +(i+1) + ' Part ' +(j+1) ; menu.appendChild(anchor); } }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Index</h1> <nav id='menu'></nav> <section id='part1'> <h2>Part1</h2> </section> <section id='part2'> <h2>Part2</h2> </section> <section id='part3'> <h2>Part3</h2> </section> <script src="menu.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.