HTML + javascript bookmark user viewing position

Question

I have this code where I can save the position of my html file like a bookmark, which works well. I would like to have a box to appear on this position so I have a visual response which position was saved.

Here is my JSFiddle

Till now the box only stays at a fixed points :(

Thank you in advance!

HTML:

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

CSS:


#box {
  position: absolute;
  background-color: black;
  opacity: 0.5;
  height: 2.5em;
  left: 0%;
  right:0%;

}

JS:

function checkStorageSupport() {
  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");
}


/******* Remove *******/
/**The saved item is removed regardless of the user's choice (to return to the last spot or not), 
 so that the prompt doesn't show up every time the page is reloaded (which can get annoying).**/

// function removeFromStorage() {
//   localStorage.removeItem("scrollPercent");
// }

// function removeCookie() {
//   document.cookie = "scrollPercent=''";
// }


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

var saveButton = document.getElementById("saveButton"),
  saved = document.getElementById("saved"),
  percent = document.getSavedPercent("savebox");

saveButton.onclick = function() {
  storageSupported ? saveInStorage() : saveCookie();
  saved.style.visibility = "visible";
  setTimeout(function() {
      saved.style.visibility = "hidden";
  }, 1500);
  percent = getSavedPercent();
};


/******* 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();
  }
  storageSupported ? removeFromStorage() : removeCookie();
}

Does it mean users position should be bookmarked after every scroll? — phi lo czar, Oct 02 '21 at 18:40
No, it only bookmarks when I click on the "Save Button", but I want that the box goes to the bookmarked position. — Wickeda, Oct 02 '21 at 18:50

Rana · Accepted Answer · 2021-10-07T19:07:17.467

Here added a working example to scroll to the bookmark

Restyle according to need and priority

This is for demo only so not used cookies and local storage you can do that and just save the coordinates to the the cookies and fetch them when needed (clicked the btn)

Update : box goes to the bookmarked position(Here movement is triggered with the click of Save position you can also trigger when clicked on Take me to save)

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) {

  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 - cordinateBtn + 'px';
};

takeMeToSave.onclick = function() {
  window.scrollTo({
    top: cordinateCont - 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
};

#save {
  position: fixed;
  top: 50px;
  left: 10px;
  width: 20%;
}

#saved {
  visibility: hidden;
  color: green;
}

#content {
  width: 60%;
  margin: auto;
}

#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;
}

<div id="save">
  <button id="saveButton">Save position</button>
  <span id="saved">Saved!</span>
</div>
<div id="box"></div>
<div id="takeMeToSave">Take Me To Save</div>

<div id="content">
  TOP<br><br>jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl;
  fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq nm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fasklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq
  ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq nm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl;
  afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup
  kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fasklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv
  dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl;
  fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup
  kfldsja fas jklf; dsjak; lfdjsakeruwiq nm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap
  urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls;
  av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas jklf; dsjak; lfdjsakeruwiq ptewquiporewquipofdsuaipv dsnmvczxnm.,vcxznm., fdsn.,mfdsanm,dsnm.,vcxzjfap urioepw uipofd sjakl; fjkdsl; afjkdl; sajfkdls; av znx,.mcvnm,cv.znx ureopwuqiporewup kfldsja fas
  <br><br>BOTTOM<br><br>
</div>

Read this for more about offsetY property

Read this for more about pageY property

For more and difference about some mouse position properties see here

Oh my god, Rana! THANK YOU SO SO SO SO MUCH! It's far better than what I was trying to achieve. The "Take me to the save" button was beyond my expectations. THANK YOU! You really made my day — Wickeda, Oct 06 '21 at 16:46
@Wickeda changed the calculation of save coordination : Instead of using `offsetY` and `50` `1` use `clientY` as a better approach — Rana, Oct 06 '21 at 17:18
Ahhh I see! It is even more precise. I'm speechless!!! Thank you again! This was my first question in stackoverflow and it was so delightful :) — Wickeda, Oct 06 '21 at 17:55

HTML + javascript bookmark user viewing position

1 Answers1