{"id":54690,"date":"2022-01-22T03:01:53","date_gmt":"2022-01-21T17:01:53","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54690"},"modified":"2022-01-22T21:09:44","modified_gmt":"2022-01-22T11:09:44","slug":"element-object-scrolling-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/element-object-scrolling-primer-tutorial\/","title":{"rendered":"Element Object Scrolling Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Element Object Scrolling Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.jpg\" title=\"Element Object Scrolling Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Element Object Scrolling Primer Tutorial<\/p><\/div>\n<p>If you are a programmer of web applications, are you of the view that the interesting &#8220;object&#8221; regarding the topic of programmatic &#8220;scrolling&#8221; is the &#8230;<\/p>\n<ul>\n<li>window object &#8230; or the &#8230;<\/li>\n<li>document object &#8230; or the &#8230;<\/li>\n<li>element object<\/li>\n<\/ul>\n<p>?  Well, for the most part, we think &#8220;element object&#8221;, because we are normally wanting a particular &#8220;display thing&#8221; be visible on the &#8220;webpage screen&#8221; at a particular point of time.<\/p>\n<p>Hashtag navigation such as involving some Javascript codeline such as &#8230;<\/p>\n<p><code><br \/>\n location.href='#myelement';<br \/>\n<\/code><\/p>\n<p> &#8230; can satisfy our &#8220;majority wish&#8221; above.  But that strategy has an implication.  We stay on the same webpage, but <i>location.hash<\/i> changes.  No big deal most of the time, probably, but you can have Javascript logic that pivots according to <i>location.hash<\/i>, as we can recall, personally, quite a bit, actually.<\/p>\n<p>Is there an &#8220;element object&#8221; based scrolling alternative?  Yes, take a look at Javascript &#8220;Element object&#8221; method [Element].<a target=_blank title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() as an approach to simulating &#8220;hashtag navigation&#8221; without the affect on <i>location.hash<\/i>, an equivalent to above going like &#8230;<\/p>\n<p><code><br \/>\n document.getElementById('myelement').scrollIntoView();<br \/>\n<\/code><\/p>\n<p>We&#8217;ve written a &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html_GETME\" title='scroll_into_view.html'>scroll_into_view.html<\/a> HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html\" title=\"Click picture\">live run<a\/>, or <a style=text-decoration:underline;cursor:pointer; onclick=\"document.getElementById('divif').innerHTML=String.fromCharCode(60) + document.getElementById('divif').title + String.fromCharCode(62) + String.fromCharCode(60) + '\/iframe' + String.fromCharCode(62);\">try below<\/a>, for you to try out this great Javascript client-side, but not &#8220;window object&#8221; based, functionality.<\/p>\n<div id=divif title='iframe style=width:100%;height:800px; src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_into_view.html'><\/div>\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='#d54690' onclick='var dv=document.getElementById(\"d54690\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54690' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are a programmer of web applications, are you of the view that the interesting &#8220;object&#8221; regarding the topic of programmatic &#8220;scrolling&#8221; is the &#8230; window object &#8230; or the &#8230; document object &#8230; or the &#8230; element object &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/element-object-scrolling-primer-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":[1580,354,1549,576,652,849,997,1986,1075,1917,1107,3896,1238,1319],"class_list":["post-54690","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cell","tag-dom","tag-element","tag-html","tag-javascript","tag-object","tag-programming","tag-proof-of-concept","tag-row","tag-scroll","tag-scrolling","tag-scrollintoview","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54690"}],"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=54690"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54690\/revisions"}],"predecessor-version":[{"id":54705,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54690\/revisions\/54705"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}