{"id":51757,"date":"2021-02-23T03:01:12","date_gmt":"2021-02-22T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51757"},"modified":"2021-02-22T13:01:27","modified_gmt":"2021-02-22T03:01:27","slug":"webpage-position-return-content-caching-issues-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/webpage-position-return-content-caching-issues-tutorial\/","title":{"rendered":"Webpage Position Return Content Caching Issues Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Webpage Position Return Content Caching Issues Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start_sessionstorage.jpg\" title=\"Webpage Position Return Content Caching Issues Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Position Return Content Caching Issues Tutorial<\/p><\/div>\n<p>Am sure, regarding yesterday&#8217;s <a title='Webpage Horizontal Position Return Content Hover Tutorial' href='#whprcht'>Webpage Horizontal Position Return Content Hover Tutorial<\/a>, a bulk of users are like me and would use the web application presented there on their web browser with caching allowed.   After all, caching speeds up response.  But with this web application concerning itself with the nuances between &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-tutorial\/'>\n<table>\n<tr>\n<th>Today we &#8230;<\/th>\n<th>Whereas usually we &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>&#8220;a&#8221; link navigation that is target=_self (ie. default navigation that stays on the same web browser tab clobbering content)<\/li>\n<li>webpage vertical scrolling of content to &#8220;below the fold&#8221;<\/li>\n<li>hashtag # navigation<\/li>\n<li>use of web browser back link\/button<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>&#8220;a&#8221; link navigation that is target=_blank (ie. to a new web browser tab leaving original webpage unaffected)<\/li>\n<li>try for &#8220;no webpage vertical scrolling of content required&#8221;<\/li>\n<li>try for &#8220;no need for hashtag # navigation&#8221;<\/li>\n<li>try for &#8220;no need for use of web browser back link\/button&#8221;<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/table>\n<\/blockquote>\n<p> &#8230; a lot of programmers out there will no doubt be sagely nodding to agree with a thought they (and now me) have, that this &#8220;location.hash&#8221; driven &#8220;not use target=_blank navigation&#8221; methodological design (which hopes to maintain horizontal\/vertical scrolling positions) is apt to run into minor problems regarding caching, specifically regarding old hashtag (ie. #) navigations from the past getting resurrected annoyingly.<\/p>\n<p>We&#8217;ve decided to go the route of the &#8220;independent arbiter&#8221; here, to go about remedying this problem, rather than trying to prove, and work out if and how we can intervene (only with clientside code) with the annoying cache references.  What form can this independent arbiter take?  Well, as far as clientside work goes, and not concerned with <i>intersessional<\/i> matters, rather just <i>intrasessional<\/i> matters, we would use <a target=_blank title='Window object sessionStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_sessionstorage.asp'>sessionStorage<\/a> (like HTTP Cookies that just hang around during the web browser session you are currently engaged in).  Our tests so far have shown improvement here.<\/p>\n<p>There are just two simple tasks &#8230;<\/p>\n<ol>\n<li>save to window.sessionStorage as you click an &#8220;a&#8221; (target=_self) link that navigates to an external (absolute) URL (within that &#8220;a&#8221; link&#8217;s onclick function logic) &#8230;<br \/>\n<code><br \/>\n    if (window.sessionStorage) {<br \/>\n     sessionStorage.setItem('returning_to_start', encodeURIComponent(lastb));<br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<li>retrieve from window.sessionStorage after navigation to an external (absolute) URL where you click its back link\/button &#8230;<br \/>\n<code><br \/>\n     var lastb='', prevlastb='';<br \/>\n     if (('' + location.hash) != '' && ('' + documentreferrer) != '') {<br \/>\n       lastb=('' + location.hash).replace('#','');<br \/>\n       if (window.sessionStorage) {<br \/>\n        prevlastb=('' + sessionStorage.getItem('returning_to_start')).replace(\/^null$\/g,'');<br \/>\n        if (prevlastb != '') {<br \/>\n         lastb=prevlastb;<br \/>\n        }<br \/>\n       }<br \/>\n     }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>So feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html-----GETME\" title=\"returning_to_start.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html-----GETME\" title=\"returning_to_start.htm\">fifth (less flaky, we hope) draft &#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-position-return-content-caching-issues-tutorial\/'>New Webpage Horizontal Position Return Content Hover Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='whprcht'>Previous relevant <a target=_blank title='Webpage Horizontal Position Return Content Hover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-horizontal-position-return-content-hover-tutorial\/'>Webpage Horizontal Position Return Content Hover Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Webpage Horizontal Position Return Content Hover Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Webpage Horizontal Position Return Content Hover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start_horizontal.jpg\" title=\"Webpage Vertical Position Return Content Hover Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>At this blog we tend to rave on about <a target=_blank title='Onions' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=onions'>\"onions of the 4th dimension\"<\/a> but today we want to let you in on a little secret <font size=1>... ready?<\/font> ...<\/p>\n\n\n\n\n\n<blockquote>\n<font size=1>There are some days of programming where even the second dimension is a bit of a challenge!<\/font>\n<\/blockquote>\n\n\n\n\n\n<p>There!  An exclusive.  But it's true, in the sense we believe if you give due credit to the \"where\" of life things, you should respect \"X\" as much as \"Y\" and vice versa, and not think that just because you can perform a task in \"X\" then \"Y\" will necessarily be that same doddle, and vice versa.<\/p>\n\n\n\n\n\n<p>As you readers of the current blog posting thread exemplified by yesterday's <a title='Webpage Vertical Position Return Content Hover Tutorial' href='#wvprcht'>Webpage Vertical Position Return Content Hover Tutorial<\/a> will know, we started out with the current web application interested in scrolling and navigation in \"Y\" ... well, today, we allow for an interest in \"X\".  And it's been a good thing to do ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>in terms of <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=prvm5ZFPIrE'>\"even stevens\"<\/a> <font size=1>(or <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=HejBwiwVlXI'>even Stooges<\/a>)<\/font> ...<\/li>\n\n\n\n\n<li>learning more regarding the nuances of CSS \"position\" property ...\n\n\n<ol>\n\n\n<li>relative ... default (and usually the way just by not mentioning) ... versus ...<\/li>\n\n\n\n\n<li>absolute ... which we often use when there is just the one screenful of webpage and we want something in a set position ... and more as time goes on, and especially with this project ...<\/li>\n\n\n\n\n<li>fixed ... as above, but also keeping that constant position even with scrolling going on<\/li>\n\n\n<\/ol>\n\n\n<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... so much so that this catering for \"X\" (and improving \"Y\") got us, to do with our h1 and h3 (header) elements, to ...<\/p>\n\n\n\n\n\n<table>\n\n\n<tr>\n\n<th colspan=2><code>var etr=location.search.split('horizontal=')[1] ? '' : '&lt;\/tr&gt;';<\/code><\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<th>Catering for X ... <font color=olive>horizontal scrolling<\/font><\/th>\n\n\n\n<th>Catering for Y ... vertical scrolling<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td style='vertical-align:top;'>\n<code style='font-size:8px;'>\n     var h1rect=document.getElementsByTagName('h1')[0].getBoundingClientRect();\n     var h3rect=document.getElementsByTagName('h3')[0].getBoundingClientRect();\n     if (etr == '') {\n       <font color=olive>document.getElementsByTagName('h1')[0].style.position='fixed';\n       document.getElementsByTagName('h1')[0].style.top=('' + h1rect.top).replace('px','') + 'px';\n       document.getElementsByTagName('h1')[0].style.left=('' + h1rect.left).replace('px','') + 'px';\n       document.getElementsByTagName('h3')[0].style.position='fixed';\n       document.getElementsByTagName('h3')[0].style.top=('' + h3rect.top).replace('px','') + 'px';\n       document.getElementsByTagName('h3')[0].style.left=('' + h3rect.left).replace('px','') + 'px';<\/font>\n       document.getElementById('dtable').innerHTML='&lt;table id=mytable style=\"<font color=olive>position:absolute;left:0px;top:' + eval(50 + eval(('' + h3rect.top).replace('px',''))) + 'px;' + '<\/font>width:' + Math.floor(eval(30 * eval('' + zcgcols.length))) + '%;\"&gt;&lt;tr id=mytr&gt;&lt;\/tr&gt;&lt;\/table&gt;';\n       document.getElementById('rtable').innerHTML='&lt;table style=\"<font color=olive>position:fixed;top:600px;left:0px;height:20%;<\/font>\" id=rhs&gt;&lt;tr id=myr&gt;&lt;\/tr&gt;&lt;\/table&gt;';\n     }\n<\/code>\n<\/td>\n\n\n\n<td style='vertical-align:top;'>\n<code style='font-size:8px;'>\n     if (etr != '') {\n       document.getElementById('rhs').innerHTML+='&lt;tr&gt;&lt;td&gt;' + document.getElementsByTagName('h1')[0].outerHTML + '&lt;\/td&gt;&lt;\/tr&gt;';\n       document.getElementById('rhs').innerHTML+='&lt;tr&gt;&lt;td&gt;' + document.getElementsByTagName('h3')[0].outerHTML + '&lt;\/td&gt;&lt;\/tr&gt;';\n     }\n<\/code>\n<\/td>\n\n<\/tr>\n\n\n<\/table>\n\n\n\n\n\n<p> ... so that we improve on \"above the fold\" visibility for web application \"workings\" reasons (ie. the user controls are more often \"above the fold\" for the user).<\/p>\n\n\n\n\n\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html----GETME\" title=\"returning_to_start.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html----GETME\" title=\"returning_to_start.htm\">fourth draft \"proof of concept\"<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\">live run<\/a> you can also try for yourself via that same minus (\"-\") sign \"a\" link to Javascript prompt window user interaction allowing you to answer \"horizontal\" for this horizontal (\"X\") scrolling functionality, as required.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-horizontal-position-return-content-hover-tutorial\/'>Webpage Horizontal Position Return Content Hover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wvprcht'>Previous relevant <a target=_blank title='Webpage Vertical Position Return Content Hover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-content-hover-tutorial\/'>Webpage Vertical Position Return Content Hover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Webpage Vertical Position Return Content Hover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start_content_hover.jpg\" title=\"Webpage Vertical Position Return Content Hover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Vertical Position Return Content Hover Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Webpage Vertical Position Return Content Tutorial' href='#wvprct'>Webpage Vertical Position Return Content Tutorial<\/a>, today we allow for a speeding up of proceedings via &#8230;<\/p>\n<ul>\n<li>addition of onmouseover (ie. hover) event logic for non-mobile platforms<\/li>\n<li>addition of ontouchstart event logic for mobile platforms<\/li>\n<\/ul>\n<p> &#8230; that are logics like the previous onclick logics of the right hand top submenu table.  But we don&#8217;t want these logics to &#8220;cover&#8221; the whole table cell, just the wording (ie. content), and so we encase that wording with a <font color=purple>new set of span elements<\/font> (plus <font color=olive>other new code<\/font>) &#8230;<\/p>\n<p><code><br \/>\n\/\/ document.body part of onload event logic ...<br \/>\n   function onl() {<br \/>\n     var ourrect;<br \/>\n     if (('' + location.hash) != '' && ('' + documentreferrer) == '') {<br \/>\n       location.href=document.URL.split('#')[0];<br \/>\n     }<font color=olive> else if (('' + location.hash) != '' && ('' + documentreferrer) != '') {<br \/>\n       bordstr='';<br \/>\n     }<\/font><br \/>\n     for (var ii=0; ii&lt;zcgcols.length; ii++) {<br \/>\n       document.getElementById('mytable').innerHTML+=\"&lt;tr&gt;&lt;td class=big onscroll='checkscroll(this);' onmousewheel='checkscroll(this);' id=\" + zcgcols[ii].replace(\/\\ \/g,'-') + \" style='text-align:center;vertical-align:middle;width:100%;height:400px;\" + bordstr + \"background-color:\" + cgcols[eval(ii % cgcols.length)] + \";'&gt;&lt;a onclick=\\\"settd(document.getElementById('s\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"'));\\\" style='background-color:white;padding: 5 5 5 5;' href='\/\/wikipedia.org\/wiki\/\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"'&gt;\"  + zcgcols[ii] + \"&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;\";<br \/>\n       document.getElementById('rhs').innerHTML+=\"&lt;tr&gt;&lt;td onclick='settd(this);' class=small id=s\" + zcgcols[ii].replace(\/\\ \/g,'-') + \" style='text-align:center;width:100%;height:40px;\" + bordstr + \"background-color:\" + cgcols[eval(ii % cgcols.length)] + \";'&gt;<font color=purple>&lt;span id=r\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"&gt;<\/font>\" + zcgcols[ii] + \"<font color=purple>&lt;\/span&gt;<\/font>&lt;\/td&gt;&lt;\/tr&gt;\";<br \/>\n       bordstr=\"\";<br \/>\n     }<br \/>\n     <font color=olive>if (('' + location.hash) != '' && ('' + documentreferrer) != '') {<br \/>\n       lastb=('' + location.hash).replace('#','');<br \/>\n       console.log(lastb);<br \/>\n       for (var iw=0; iw&lt;zcgcols.length; iw++) {<br \/>\n           if (lastb == zcgcols[iw].replace(\/\\ \/g,'-')) {<br \/>\n             lasti=iw;<br \/>\n    document.getElementById(lastb).style.border=\"5px solid yellow\";<br \/>\n    document.getElementById('s' + lastb).style.border=\"5px solid yellow\";<br \/>\n           }<br \/>\n       }<br \/>\n     }<\/font><br \/>\n     var ourbigs=document.getElementsByTagName('td');<br \/>\n     for (var iii=0; iii<ourbigs.length; iii++) {\n       if (('' + ourbigs[iii].className) == 'big') {\n         bigs.push(ourbigs[iii].getBoundingClientRect());\n       }\n     }\n     <font color=blue>documentreferrer='x';<\/font><br \/>\n\/\/ rest of onload logic<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>that get these new event logics applied to them<\/font> &#8230;<\/p>\n<p><code><br \/>\n   function askcontent() {<br \/>\n     var askfor=prompt('Please enter comma separated list of content items.<font color=blue>  An answer of just space(s) introduce sped up hover or linger over right hand side wording event logic.<\/font>', location.search.split('alist=')[1] ? (decodeURIComponent(location.search.split('alist=')[1].split('&')[0]).replace(\/\\,\/g,\"','\") + \"']\").replace(\/\\[\/g,'').replace(\/\\]\/g,'') : \"'lime','maroon','lightblue','purple','navy','teal','fuchsia','olive','red','lightgreen','darkorange','pink','orange'\");<br \/>\n     if (askfor == null) { askfor=''; }<br \/>\n     if (askfor.trim() != '' && askfor != (location.search.split('alist=')[1] ? (decodeURIComponent(location.search.split('alist=')[1].split('&')[0]).replace(\/\\,\/g,\"','\") + \"']\").replace(\/\\[\/g,'').replace(\/\\]\/g,'') : \"'lime','maroon','lightblue','purple','navy','teal','fuchsia','olive','red','lightgreen','darkorange','pink','orange'\")) {<br \/>\n       \/\/cgcols=eval(\"['\" + decodeURIComponent(askfor).replace(\/\\,\/g,\"','\") + \"']\");<br \/>\n       \/\/onl();<br \/>\n       location.href=document.URL.split('?')[0].split('#')[0] + '?alist=' + encodeURIComponent(askfor.replace(\/\\'\\,\\'\/g,',').replace(\/^\\'\/g,'').replace(\/\\'$\/g,''));<br \/>\n     }<font color=blue> else if (askfor.trim() == '' && askfor != '') {<br \/>\n       var spans=document.getElementsByTagName('span');<br \/>\n       for (var ispans=0; ispans&lt;spans.length; ispans++) {<br \/>\n         spans[ispans].onmouseover = function(event) { console.log('You hovered over a right hand side submenu bit of wording ... ' + event.target.innerHTML); settd(document.getElementById(event.target.id.replace('r','s'))); }<br \/>\n         spans[ispans].ontouchend = function(event) { console.log('You lingered over a right hand side submenu bit of wording ... ' + event.target.innerHTML); settd(document.getElementById(event.target.id.replace('r','s'))); }<br \/>\n       }<br \/>\n     }<\/font><br \/>\n   }<br \/>\n<\/code><\/p>\n<p>Try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html---GETME\" title=\"returning_to_start.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html---GETME\" title=\"returning_to_start.htm\">third draft &#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\">live run<\/a> you can also try for yourself via that same minus (&#8220;-&#8220;) sign &#8220;a&#8221; link to Javascript prompt window user interaction allowing you to introduce those extra event functionalities, as required.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-content-hover-tutorial\/'>Webpage Vertical Position Return Content Hover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wvprct'>Previous relevant <a target=_blank title='Webpage Vertical Position Return Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-content-tutorial\/'>Webpage Vertical Position Return Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=Webpage Vertical Position Return Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start_content.jpg\" title=\"Webpage Vertical Position Return Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Vertical Position Return Content Tutorial<\/p><\/div>\n<p>The improvement, today, onto yesterday&#8217;s <a title='Webpage Vertical Position Return Tutorial' href='#wvprt'>Webpage Vertical Position Return Tutorial<\/a> is, nominally, to allow the user to specify what their table cell wording should be, as a comma separated string entered via a Javascript prompt window and accessed via a minus sign &#8220;a&#8221; link in amongst the header elements.<\/p>\n<p>Along the way, we realized a thing about returns to the same web application using the same web browser previously used.  The nature of the web application with its scrolling will cause autocompletion at the web browser address bar to &#8230;<\/p>\n<p><code>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html#lime<\/code><\/p>\n<p> &#8230; or something similar.  Within the web application this causes &#8220;location.hash&#8221; to get a value, and the implication of this is that for the working of the web application, including going off to external links and arriving back appropriately positioned, via that external webpage&#8217;s back button\/link we need to differentiate &#8230;<\/p>\n<ul>\n<li>a web browser address bar entry such as &#8230;<br \/>\n<code>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html#maroon<\/code><br \/>\n &#8230; as you first enter the web application from nowhere (ie. above is typed or copied into the web browser address bar and you act to navigate to that URL (with location.hash defined)) &#8230; as distinct from &#8230;<\/li>\n<li>a web browser address bar entry such as &#8230;<br \/>\n<code>HTTP:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html#maroon<\/code><br \/>\n &#8230; as you return to the web application via one of those external webpage back button\/link<\/li>\n<\/ul>\n<p>What might help, at the client level or server level (as our web application is serverside PHP)?  Well, at client level there is &#8230;<\/p>\n<p><code>document.referrer<\/code><\/p>\n<p> &#8230; which is a client (ie. seen by Javascript) data item that contains a URL of a webpage navigated from or nothing\/blank\/null when you navigated to the webpage from the web browser address bar directly &#8230;<\/p>\n<p><code><br \/>\n\/\/ initialization of global variable<br \/>\n   var documentreferrer=('' + document.referrer);<br \/>\n<br \/>\n\/\/ document.body <font color=blue>part of<\/font> onload event logic ...<br \/>\n   function onl() {<br \/>\n     var ourrect;<br \/>\n     <font color=blue>if (('' + location.hash) != '' && ('' + documentreferrer) == '') {<br \/>\n       location.href=document.URL.split('#')[0];<br \/>\n     }<\/font><br \/>\n     for (var ii=0; ii<zcgcols.length; ii++) {  \n       document.getElementById('mytable').innerHTML+=\"&lt;tr&gt;&lt;td class=big onscroll='checkscroll(this);' onmousewheel='checkscroll(this);' id=\" + zcgcols[ii].replace(\/\\ \/g,'-') + \" style='text-align:center;vertical-align:middle;width:100%;height:400px;\" + bordstr + \"background-color:\" + cgcols[eval(ii % cgcols.length)] + \";'&gt;&lt;a onclick=\\\"settd(document.getElementById('s\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"'));\\\" style='background-color:white;padding: 5 5 5 5;' href='\/\/wikipedia.org\/wiki\/\" + zcgcols[ii].replace(\/\\ \/g,'-') + \"'&gt;\"  + zcgcols[ii] + \"&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;\";     \n       document.getElementById('rhs').innerHTML+=\"&lt;tr&gt;&lt;td onclick='settd(this);' class=small id=s\" + zcgcols[ii].replace(\/\\ \/g,'-') + \" style='text-align:center;width:100%;height:40px;\" + bordstr + \"background-color:\" + cgcols[eval(ii % cgcols.length)] + \";'&gt;\" + zcgcols[ii] + \"&lt;\/td&gt;&lt;\/tr&gt;\";     \n       bordstr=\"\";\n     }\n     var ourbigs=document.getElementsByTagName('td');\n     for (var iii=0; iii<ourbigs.length; iii++) {\n       if (('' + ourbigs[iii].className) == 'big') {\n         bigs.push(ourbigs[iii].getBoundingClientRect());\n       }\n     }\n     <font color=blue>documentreferrer='x';<\/font><br \/>\n\/\/ rest of onload logic<br \/>\n   }<br \/>\n<\/code><\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html-GETME\" title=\"returning_to_start.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html-GETME\" title=\"returning_to_start.html\">second draft &#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\">live run<\/a> you can also try for yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-content-tutorial\/'>Webpage Vertical Position Return Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wvprt'>Previous relevant <a target=_blank title='Webpage Vertical Position Return Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/webpage-vertical-position-return-tutorial\/'>Webpage Vertical Position Return Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=Webpage Vertical Position Return Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.gif\" title=\"Webpage Vertical Position Return Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Webpage Vertical Position Return Tutorial<\/p><\/div>\n<p>We have a very simple &#8220;proof of concept&#8221; web application to present today.  The reason for our &#8220;webpage position return&#8221; idea centres around four concepts &#8230;<\/li>\n<table>\n<tr>\n<th>Today we &#8230;<\/th>\n<th>Whereas usually we &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>&#8220;a&#8221; link navigation that is target=_self (ie. default navigation that stays on the same web browser tab clobbering content)<\/li>\n<li>webpage vertical scrolling of content to &#8220;below the fold&#8221;<\/li>\n<li>hashtag # navigation<\/li>\n<li>use of web browser back link\/button<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>&#8220;a&#8221; link navigation that is target=_blank (ie. to a new web browser tab leaving original webpage unaffected)<\/li>\n<li>try for &#8220;no webpage vertical scrolling of content required&#8221;<\/li>\n<li>try for &#8220;no need for hashtag # navigation&#8221;<\/li>\n<li>try for &#8220;no need for use of web browser back link\/button&#8221;<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/table>\n<p>So what happens if no hashtag # navigation happens ahead of navigating to a new webpage via an &#8220;a&#8221; link set to target=_self?  It will, unless catered for (and there is a mix out there), will return back to that previous webpage at its topmost positioning (as far as vertical scrolling goes).   The internal hashtag # navigation concerns taken in our proof of concept allows the return to be either exactly, or nearly, returned to &#8230;<\/p>\n<ul>\n<li>the appropriate webpage &#8230; doh! &#8230;<\/li>\n<li>at an apt vertical scrolling position<\/li>\n<\/ul>\n<p>See what we mean, and what we are talking about with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html_GETME\" title=\"returning_to_start.html\">our first draft &#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" title=\"Click picture\">live run<\/a> you can also try below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/returning_to_start.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51696' onclick='var dv=document.getElementById(\"d51696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51696' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51709' onclick='var dv=document.getElementById(\"d51709\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51709' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51715' onclick='var dv=document.getElementById(\"d51715\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51715' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51740' onclick='var dv=document.getElementById(\"d51740\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51740' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51757' onclick='var dv=document.getElementById(\"d51757\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cache\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51757' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Am sure, regarding yesterday&#8217;s Webpage Horizontal Position Return Content Hover Tutorial, a bulk of users are like me and would use the web application presented there on their web browser with caching allowed. After all, caching speeds up response. But &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/webpage-position-return-content-caching-issues-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[51,2824,3566,123,177,257,3013,3037,557,3036,1608,576,652,1807,830,871,872,1988,997,1761,2945,1107,3169,2001,3565,1319,3332,1418],"class_list":["post-51757","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-above-the-fold","tag-absolute","tag-back","tag-back-button","tag-cache","tag-content","tag-document-referrer","tag-fixed","tag-hashtag","tag-horizontal","tag-hover","tag-html","tag-javascript","tag-link","tag-navigation","tag-onmouseover","tag-ontouchend","tag-position","tag-programming","tag-prompt","tag-relative","tag-scrolling","tag-sessionstorage","tag-tab","tag-target","tag-tutorial","tag-vertical-scrolling","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51757"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51757"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51757\/revisions"}],"predecessor-version":[{"id":51766,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51757\/revisions\/51766"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}