I want to store users location on a page. Let's say the user is reading an article. If the user hit the refresh button it should reload on the same position.
I know I can use document.body.scrollTop to store the user's location.
I want to know if there is a better way?
You should use anchors, you can even have a url pointing to a specific loction on the site. If you reload the page you end up at the same position. So make the url auto update from elements on your page. But you MUST remove all anchor tags on page load, if you dont do that the scroll will snapp and lag to the anchors
var url = "";
var anchor = "";
var element1 = "";
var element2 = "";
$(document).ready(function () {
//save url on page load
$('a').each(function () {
//get the anchor name attribute
var nameAttr = $(this).attr('name');
if (nameAttr !== undefined) {
//remove special characters and replace space with "-" on name attribute
nameAttr = nameAttr.replace(/\s/g, '-');
nameAttr = nameAttr.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
nameAttr = nameAttr.toLocaleLowerCase();
//changing the name attribute
$(this).attr('name', nameAttr);
}
});
//Storing url
url = window.location.href;
url = url.substring(0, url.indexOf('#'));
});
$(function () {
$(window).scroll(function () {
//retrive right headline
var findMiddleElement = (function (docElm) {
var viewportHeight = docElm.clientHeight,
elements = $('.subheading');
return function (e) {
var middleElement;
if (e && e.type === 'resize')
viewportHeight = docElm.clientHeight;
elements.each(function () {
var pos = this.getBoundingClientRect().top;
if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
//find correct element
middleElement = this;
return false;
}
});
//If statement to remove lag
element1 = middleElement;
if (element1 !== element2) {
element2 = element1;
anchor = $(middleElement).text();
if (anchor !== "") {
//change url
//remove special characters and replace space with "-" in url
anchor = anchor.replace(/\s/g, '-');
anchor = anchor.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '');
anchor = anchor.toLocaleLowerCase();
//update url
window.location.href = url + "#" + anchor;
}
}
}
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
//remove the url to prevent lag
$("a").removeAttr('name');
console.log(window.location.href);
});
});p{
margin: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='subheading'><a name='test1'/>test1</p>
<p class='subheading'><a name='test2'/>test2</p>
<p class='subheading'><a name='test3'/>test3</p>
<p class='subheading'><a name='test4'/>test4</p>
<p class='subheading'><a name='test5'/>test5</p>
I think you can store the position in local storage , after page load you can scroll to that position.
