Azịza nso nso maka how to detect browser back and forward button clickshttps://support.mozilla.org/ig/questions/13653802022-02-16T13:42:14-08:00That actually fixes it just fine. I wasn't going to worry about the left table so much as I figured 2022-02-16T13:42:14-08:00WayneCahttps://support.mozilla.org/ig/questions/1365380#answer-1484266<p>That actually fixes it just fine. I wasn't going to worry about the left table so much as I figured the most important part is the right table, but this looks much better than leaving the left table alone. Thanks again!
</p>I'm glad to hear it worked in real life (I was pasting the code into the Web Console for testing).
I2022-02-16T10:18:42-08:00jscher2000https://support.mozilla.org/ig/questions/1365380#answer-1484241<p>I'm glad to hear it worked in real life (I was pasting the code into the Web Console for testing).
</p><p>I was thinking about that left column, but I wasn't sure of the most polite way to handle it. What I mean is, the script fires both for going back/forward, and for user clicks, because the hash changes in both cases. Because of that, lining up the left column with the right column all the time might be more annoying than helpful because people would lose their place in the list. There is a way to check whether the left panel <em>needs</em> to move and I implemented that in the following You could test and see what you think.
</p>
<pre>&lt;script&gt;
window.addEventListener('hashchange', function() {
if (location.hash.length &gt; 0){
// Navigate to the hash
document.getElementById(location.hash.substr(1)).scrollIntoView();
// Line up the left panel only if needed (if vertical position of link is too high/low)
var el = document.querySelector('a[href="' + location.hash + '"]');
if (el){
var rect = el.getBoundingClientRect();
if (rect.top &lt; 0 || rect.bottom &gt; document.documentElement.clientHeight) el.scrollIntoView();
}
} else {
// Go the beginning
document.getElementById('COMMENT1').scrollIntoView();
// Line up the left panel
document.querySelector('a[href="#COMMENT1"]').scrollIntoView();
// To top of page
document.body.scrollIntoView();
}
}, false);
&lt;/script&gt;</pre>That was exactly what I needed. Thanks so much. Now I can focus on getting the rest of the document 2022-02-16T08:35:24-08:00WayneCahttps://support.mozilla.org/ig/questions/1365380#answer-1484228<p>That was exactly what I needed. Thanks so much. Now I can focus on getting the rest of the document finished. I will also be using this as a guide for dealing with the other page that doesn't reselect the previous link "tab" when the back or forward button is clicked. I'm sure the hashchange event won't work there, but this at least gives me a clue of how to write the code. I have included in the source credit to you for the script, and I will be including a link to this post for others to read.
</p>Try this:
<script>
// Reposition page after a hash change
window.addEventListener('hashchange2022-02-15T14:11:00-08:00jscher2000https://support.mozilla.org/ig/questions/1365380#answer-1484027<p>Try this:
</p>
<pre>&lt;script&gt;
// Reposition page after a hash change
window.addEventListener('hashchange', function() {
if (location.hash.length &gt; 0){
// Navigate to the hash
document.getElementById(location.hash.substr(1)).scrollIntoView();
} else {
// Go the beginning
document.getElementById('COMMENT1').scrollIntoView();
document.body.scrollIntoView();
}
}, false);
&lt;/script&gt;</pre>I looked at the page you linked to. That could be my solution, but I have at least 85 links using th2022-02-15T13:44:56-08:00WayneCahttps://support.mozilla.org/ig/questions/1365380#answer-1484024<p>I looked at the page you linked to. That could be my solution, but I have at least 85 links using the hashtag identifier. Would I have to create a different function for each one? I really don't understand the new terminology. I can read it, but it doesn't make sense to me. And the examples don't really tell me how to use it. I could use an example that does what I need it to do. I can always adapt it to my page. I just don't know how to write the code myself.
</p>Do you mean Firefox's toolbar buttons? You cannot detect that directly. However, the "hash" on the U2022-02-15T00:18:32-08:00jscher2000https://support.mozilla.org/ig/questions/1365380#answer-1483821<p>Do you mean Firefox's toolbar buttons? You cannot detect that directly. However, the "hash" on the URL changes when the user goes forward/back between anchors in the page, so you could try hooking into the hashchange event.
</p><p><a href="https://developer.mozilla.org/docs/Web/API/Window/hashchange_event" rel="nofollow">https://developer.mozilla.org/docs/Web/API/Window/hashchange_event</a>
</p><p>Would that detect the navigation you're concerned about?
</p>