Problems related to the Javascript ScrollIntoView Code
The javascript .ScrollIntoView built in function is great and acts like bookmark code that allows your sites visitor to quickly scroll to a piece of desired content. Like most things it's not perfect.
Some reported issues related to .ScrollIntoView include:
- If scrolling upwards, .ScrollIntoView can move the page in unpredictable ways.
- Browser support. The javascript .ScrollIntoView function IS support by all the major browsers, but the reliability and predictability of how and exactly where it scrolls may be an issue for you.
- Since catering to the inherent laziness of sites visitors seems to become more and more of a priority, how about javascript code that makes the content COME TO THE VISITOR.
- It can be an issue if attempting to scroll to a frame on the page.
A Better, More Reliable Alternative to .ScrollIntoView, No JQuery, Small, Fast Code, Works in All Browsers
You can see the code at work on this page. Above are the bookmarks that act as the jumps for the ScrollIntoView alternative code and what you are reading here is the content that gets jumped to or scrolled to when the visitor clicks it except that the code comes to us instead of us getting scrolled down to the code. Click the various items in the table of contents above to see this code at work.
The only consideration with the following code is if your site or blogs visitors have javascript enabled but it's not 2005 anymore and 99% of all internet surfers have javascript enabled in their favorite web browser.
The first thing you need is a table of contents of some sort. The table of contents will contain the links that the user clicks that will cause the content to come to them. It does not have to be links though. It could be buttons or whatever. The most important thing is insertion of an 'onclick' event handler.
Sample HTML Code for the Bookmarks
As previously mentioned, it does not matter what objects you employ to act as the bookmarks for the site visitor to click. What matters is the insertion of the onclick code, and pretty much any html element can except an 'onclick' event handler.
As an example:
1:
2:
3:
4:
5:
<ul>
<li onclick="reOrderContent(content1)">Sample Table of Contents Link for Content #1</li>
<li onclick="reOrderContent(content2)">Sample Table of Contents Link for Content Item #2</li>
<li onclick="reOrderContent(content3)">Sample Table of Contents Link for Content #3</li>
</ul>
The HTML Code for the Content
The html code required for the content itself is fairly simple. It's a simple matter of surrounding all the content you want to swap around with a div with the id of '<div id="contentWrapper">'. Then inside that div you will have a div given the id of 'content1' for the first block of content, 'content2' for the second block of content, etc.
For example:
1:
2:
3:
4:
5:
6:
7:
8:
9:
<div id="contentWrapper">
<div id="content1" class="content">
Whatever content you want to put in here, etc. ...
</div><-- #content1 -->
<div id="content2" class="content">
Whatever content you want to put in here, etc. ...
</div><-- #content2 -->
<div id="content3" class="content">
Whatever content you want to put in here, etc. ...
</div><-- #content3 -->
</div><-- #contentWrapper -->
The Javascript Code
The javascript code below is the brains behind it all. This is the code that does the work of making it so when your site visitor clicks that table of content link #3, that the div 'content3' gets brought to the top, when they click the table of contents for content link #2, the div 'content2' gets brought to the top, etc.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
function reOrderContent(divToPutOnTop) {
var contentsParent = document.getElementById('contentWrapper');
var divs = contentsParent.getElementsByTagName('DIV');
var divCount = divs.length;
var i=0;
var numTimesToAppend=0;
var loopCount=0;
for (i=0;i<divCount;i++){
if(divs[i].className=='content'){
loopCount++;
if(divs[i].id == divToPutOnTop.id){
if((loopCount-1)==0){break;}
else{
numTimesToAppend = (loopCount-1);
for(i=0;i<(loopCount-1);i++){contentsParent.appendChild(divs[0]);}
break;
}}}}}
Explanation of How the Javascript Works
What is great about this solution is that there is no limit to the number of content blocks you can have within the 'contentWrapper'. I have seen a lot of suggestions online for using and manipulating table header, row and footer, but this limits you to a maximum of three content sections.
In a nutshell, here is how the code works. For example, let's pretend the site visitor clicks the table of contents link 'Sample Table of Contents Link for Content #3' ...
- The code gets a handle to the 'contentParent' div (remember, this is the outer, parent div that surrounds all your content, 'content1, content2, etc.', that you want to be able to swap around)..
- The code then looks at each of the divs contained within the 'contentParent' div.
- It only pays attention to the divs with the class of 'content'.
- It loops or looks through each of the content divs, starting from the top, stopping when it gets to the div with the id that matches the id of the item clicked in the table of contents. The code keeps track or count of the number of divs it has to go past (with the class of 'content') in a variable we named 'loopCount', until it gets to the div that matches.
- The code then calls a built in Javascript function called '.appendChild' This function takes the div that is at the top and moves it to the bottom. This causes the next div down to move to the top. The Javascript code does this 'loopCount' number of times.
- When it has finished, the content block the user clicked in the table of contents is now at the top.
Of course the Javascript code does this so fast you don't see the swapping happening.
Demo Download of Alternative to ScrollIntoView Code
Depending upon your level of experience with HTML and Javascript, this may seem quite daunting, but it is really not very complicated. Download the example code below and examine it. You will get the hang of it in no time.
