I have this code where I can save the position of my html file like a bookmark and the box jumps to the position of the last save. Both work well.

When I re-open the document again it goes to the position as planned, but the box is not there anymore. (the box jumps back to the start)

**How can I keep the box at the saved point after re-loading the html?**

Here is my [JSFiddle](http://jsfiddle.net/thkjzr86/11/)

***Thank you very much in advance!***

HTML:

`<div class="box"></div>`

CSS:

```
#takeMeToSave {
  background-color: lightblue;
  position: fixed;
  top: 0;
  cursor:pointer;
  border-radius:4px;
  padding:3px;
}

#box {
  position: absolute;
  background-color: black;
  opacity: 0.5;
  height: 2.5em;
  width: 100%;
  left: 0;
  top: 0px;
  transition: 0.3s top;
  pointer-events:none;
}

```

JS:

```
  var test = "test";
  try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
  } catch(e) {
      return false;
  }
}

function getTotalHeight() {
  return document.body.clientHeight;
}

function getSavedPercent() {
  var percent = storageSupported ? loadFromStorage() : loadFromCookie();
  return (percent == null || percent == "") ? 0 : percent;
}

/******* Save *******/

function saveInStorage() {
  localStorage.setItem("scrollPercent", (document.documentElement.scrollTop / getTotalHeight()));

}

function saveCookie() {
  var expDate = new Date();
  expDate.setDate(expDate.getDate() + 7); // start over if it's been more than ___ days
  document.cookie = "scrollPercent=" + (document.documentElement.scrollTop / getTotalHeight())
              + "; " + expDate;         
}

/******* Load *******/

function loadFromStorage() {
  return localStorage.getItem("scrollPercent");
}

function loadFromCookie() {
  return document.cookie.replace(/(?:(?:^|.*;\s*)scrollPercent\s*\=\s*([^;]*).*$)|^.*$/, "$1");
}

/******* Handler *******/

var saveButton = document.getElementById("saveButton");
var saved = document.getElementById("saved");
var takeMeToSave = document.getElementById("takeMeToSave");
var cordinateCont = "";
var cordinateBtn = ""
var boxMove = document.getElementById("box");

takeMeToSave.style.display = "none"
saveButton.onclick = function(e) {
  storageSupported ? saveInStorage() : saveCookie();
  saved.style.visibility = "visible";
  setTimeout(function() {
    saved.style.visibility = "hidden";
  }, 1500);
  cordinateCont = e.pageY; //where is the click according to content including scroll content 
  cordinateBtn = e.clientY; //cordinateBtn is where it is clicked inside btn
  takeMeToSave.style.display = "block";
  boxMove.style.top = cordinateCont +60 - cordinateBtn + 'px';
};

takeMeToSave.onclick = function() {
  storageSupported ? saveInStorage() : saveCookie();
  window.scrollTo({
    top: cordinateCont + 60 - cordinateBtn,
    left: 0,
    behavior: 'smooth'
  });
  //1 is borderWidth of btn and 50, cordinateBtn, 1 is subtracted from position to remove wherever it is clicked on btn and only change with respect to top of window screen of content
};

/******* Logic *******/

var storageSupported = checkStorageSupport(),
  percent = getSavedPercent();

if (percent > 0) {
  if (confirm("Would you like to continue reading where you left off?")) {
      document.documentElement.scrollTop = percent * getTotalHeight();
  };
}

```