So, I'm using fullpage.js jquery for scrolling on my website.
Each scroll section is divided in hashes, like index.html/#firstPage etc.
I've made a fixed scroll to top button, but I wanna make him disappear if hash equals #firstPage.
I've made a Js script too, but it doesn't work. Any ideas?

mybutton = document.getElementById("scroll_top_button");

var stringHash = window.location.hash;
console.log(stringHash); // Returns hash and it works
function hashDisappear() {
  if (stringHash == "#firstPage") {// this thing doesn't work at all.
    mybutton.style.display = "none";
  } else {
    mybutton.style.display = "block";
  }
}

Edit
My bad, function was never called, but when hash changes, because of scrolling, button is not appearing, only after restart page. How to make it check if hash changes and execute function or smthing?

CodePudding user response：

Try it

window.addEventListener('hashchange', function() {
  //Your Function
}, false);

https://developer.mozilla.org/docs/Web/API/Window/hashchange_event

https://caniuse.com/?search=hashchange

CodePudding user response：

Try to use something that periodically checks if the value is changed.. For example in react there are useEffect... you can use something like that..

CodePudding user response：

I found perfect script for this situation

mybutton = document.getElementById("scroll_top_button");

function locationHashChanged() {
  if (location.hash === "#firstPage") {
    mybutton.style.display = "none";
  } else {
    mybutton.style.display = "block";
  }
}

window.onhashchange = locationHashChanged;

But @Smith Charl helped me to find main logic to do this script tho