I have a one page website, example. There are two sections: intro at the top of the page, and contact at the bottom of the page. If I want someone to visit the contact section without having to scroll through the intro, I give them this link: example/#contact. I'm talking about these visits below.

The browser automatically scrolls down to the contact section, but it ignores the fixed navigation at the top of the page, so the contact section is scrolled behind the navigation so the top of the contact section bees invisible. This is what I want to correct using JavaScript, by subtracting the height of the fixed navigation from the scroll position. Let's call this function the scrollCorrector. The problem is that I don't know exactly when such an automatic scrolling happens, so the scrollCorrector isn't called everytime it should be.

When should the scrollCorrector be called? When the automatic scrolling happens because of the hash portion. Why not to use onscroll? Because this way I can't differenciate an auto scroll from a user scroll. Why not to use onclick on every <a href="example/#contact">? I'll use it, but what if a user navigates by the browser's back button? Okay, I'll use onpopstate as well. But what if the user es from example/#intro by manually rewriting the URL to example/#contact? Okay, I'll use onhashchange as well. But what if the user is already on example/#contact, clicks to the address bar, and presses enter without any modification? None of the above helps then.

What event should I listen to then? If such an event doesn't exist, how could the scrollCorrector know that an automatic scroll has just happened?

I have a one page website, example.. There are two sections: intro at the top of the page, and contact at the bottom of the page. If I want someone to visit the contact section without having to scroll through the intro, I give them this link: example./#contact. I'm talking about these visits below.

The browser automatically scrolls down to the contact section, but it ignores the fixed navigation at the top of the page, so the contact section is scrolled behind the navigation so the top of the contact section bees invisible. This is what I want to correct using JavaScript, by subtracting the height of the fixed navigation from the scroll position. Let's call this function the scrollCorrector. The problem is that I don't know exactly when such an automatic scrolling happens, so the scrollCorrector isn't called everytime it should be.

When should the scrollCorrector be called? When the automatic scrolling happens because of the hash portion. Why not to use onscroll? Because this way I can't differenciate an auto scroll from a user scroll. Why not to use onclick on every <a href="example./#contact">? I'll use it, but what if a user navigates by the browser's back button? Okay, I'll use onpopstate as well. But what if the user es from example./#intro by manually rewriting the URL to example./#contact? Okay, I'll use onhashchange as well. But what if the user is already on example./#contact, clicks to the address bar, and presses enter without any modification? None of the above helps then.

What event should I listen to then? If such an event doesn't exist, how could the scrollCorrector know that an automatic scroll has just happened?

• javascript
• dom-events
• anchor
• hashchange

• 1 What is the question? What is a jump? (I might be being stupid???) – Neilos Commented Oct 2, 2015 at 23:20
• I mean when the browser scrolls to a specific element in the document that has a matching id with the URL's hash portion. – Tamás Bolvári Commented Oct 2, 2015 at 23:24
• Ok I think I understand now, but your question is very unclear, you might want to state your problem more clearly. There is no built in functionality to do what you want, you could do something like this stackoverflow./questions/487073/… checking if the anchors are visible when you scroll. Then when it has "jumped" you could fire a custom event. Is that the kind of thing you mean? – Neilos Commented Oct 2, 2015 at 23:34
• With regards to the anchor only firing one event you could bind events to the anchor directly. But unfortunately you will struggle to get an event of any kind to fire when the user presses enter in the address bar without making any changes. – Neilos Commented Oct 2, 2015 at 23:35
• I agree, but I don't know how could I describe the problem more clearly. I might rewrite it later, but now it's 2AM here and I'm out of coffee. :) Thank you for the help anyway. I know how to check if the element is in the viewport. The thing I don't know is when should I check it. I mean I know when to check it, but don't know if the event is happened or not. Clicks on links can be detected. Hash changes can be detected. But "hash changes to the same hash" that result in the browser scrolling again to the specified element can not be detected. At least I haven't figured it out yet. – Tamás Bolvári Commented Oct 2, 2015 at 23:46

2 Answers 2

The scroll event will fire, so you could,

• check your actual location.hash, if empty we don't care
• debounce the event to be sure it's not a mousewheel that triggered it
• get the actual document.querySelector(location.hash).getBoundingClientRect().top, if it is ===0 then call your scrollCorrector.

var AnchorScroller = function() {
  // a variable to keep track of last scroll event
  var last = -100, // we set it to -100 for the first call (on page load) be understood as an anchor call
    // a variable to keep our debounce timeout so that we can cancel it further
    timeout;

  this.debounce = function(e) {
    // first check if we've got a hash set, then if the last call to scroll was made more than 100ms ago
    if (location.hash !== '' && performance.now() - last > 100)
    // if so, set a timeout to be sure there is no other scroll ing
      timeout = setTimeout(shouldFire, 100);
    // that's not an anchor scroll, stop it right now !	
    else clearTimeout(timeout);
    // set the new timestamp
    last = performance.now();
  }

  function shouldFire() {
    // a pointer to our anchored element
    var el = document.querySelector(window.location.hash);
    // if non-null (an other usage of the location.hash) and that it is at top of our viewport
    if (el && el.getBoundingClientRect().top === 0) {
      // it is an anchor scroll
      window.scrollTo(0, window.pageYOffset - 64);
    }
  }
};
window.onscroll = new AnchorScroller().debounce;

body {
  margin: 64px 0 0 0;
}
nav {
  background: blue;
  opacity: 0.7;
  position: fixed;
  top: 0;
  width: 100%;
}
a {
  color: #fff;
  float: left;
  font-size: 30px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  text-decoration: none;
  width: 50%;
}
div {
  background: grey;
  border-top: 5px #0f0 dashed;
  font-size: 30px;
  padding: 25vh 0;
  text-align: center;
}
#intro,#contact {  background: red;}

<nav>
  <a href="#intro">Intro</a>
  <a href="#contact">Contact</a>
</nav>
<div id="intro">  Intro </div>
<div> Lorem </div>
<div id="contact">  Contact </div>
<div> Ipsum </div>

Caveats :
- it introduces a 100ms timeout between the scroll event and the correction, which is visible.
- it's not 100% bullet-proof, an user could trigger only one event (by mousewheel or keyboard) and fall exactly at the right position so it produces a false-positive. But chances for that to happen are so small that it might be acceptable for such a behaviour.

I have looked and yes I can see the limitations you mention with using window.onhashchange.

I understand what you want but I don't think such a thing exists.

This is the best I came up with (abandoning hashchange altogether):

<html>
<head>
<script>
"use strict";
(function () {
    window.myFunc = function(href) {
        window.alert("Link clicked, hash is: " + href);
    };
    window.alert("Page just reloaded, hash is: " + window.location.hash);
})();
</script>
</head>
<body>
<a href="#a" onclick="myFunc(this.hash)">a</a><br />
<a href="#b" onclick="myFunc(this.hash)">b</a>
<h1 id="a">a</a>
<h1 id="b">b</a>
</body>
</html>