Scroll and Highlight

When you have a large amount of text on your page so that your reader has to scroll down the page and you explain something at the top of the page that is refering to something further down the page (out of view), sometimes it would be better if you could actually point out what you are referencing.

Example 1:

I want to make sure you read the 3rd paragraph that I am referring to now, but which you cannot see because it is lower down the page
So ... I create a keyword by emphasising the word paragraph, in bold, and make it a link.

When you click the link the page scrolls down to bring the paragraph into view, the background of the paragraph flashes, and the page scrolls back up.

Example 2:

I want to point out a specific word in that paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ullamcorper commodo libero. Nunc turpis quam, pellentesque vel, feugiat eget, convallis semper, diam. Sed hendrerit purus vitae felis. Aliquam nec arcu. Duis porta varius dui. Aenean ullamcorper. Cras vitae elit non velit venenatis vehicula. Vestibulum magna. Proin fringilla rutrum lorem. Fusce vel arcu viverra mauris dictum placerat. Morbi aliquam blandit mauris. Sed eu felis. Curabitur purus nibh, viverra id, pharetra ut, condimentum eget, diam. Mauris justo. Aliquam at nisl. Vestibulum sodales mauris non risus. Vivamus risus dui, scelerisque quis, commodo vitae, consectetuer eu, ante. Quisque suscipit odio in velit. Curabitur ac mauris in erat eleifend ultricies. Integer adipiscing diam a orci. Fusce tortor purus, suscipit et, tincidunt nec, rhoncus in, tellus. Phasellus vel risus eu nunc congue malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras eget mauris. Proin vestibulum nisi eget lectus. Duis libero ligula, mollis vel, posuere et, rhoncus vitae, lorem. Suspendisse ut purus. Nulla facilisi. Ut libero risus, aliquet et, iaculis placerat, cursus at, urna.

Aenean ut mi non justo rhoncus feugiat. Sed placerat egestas lacus. Sed turpis. Phasellus a dolor. Fusce ut leo. Duis ac tellus sit amet sem ultricies vulputate. Morbi in ante in purus consectetuer porttitor. This Word! Nunc nisi augue, sollicitudin quis, cursus ac, varius elementum, lacus. Nam nec lorem. Donec tincidunt ante et erat. Nam at magna nec tortor suscipit ornare. Aenean eget turpis. Integer tortor.

Try Me

To create a keyword place it in a link, and give the link a unique ID, include the onclick event which will pass the relevant arguments to function whichway('caller_ID','target_ID','direction','colour'). <a id="caller1" href="#null" onclick="whichway('caller1','target1','down','gold')">Keyword</a>

The target is simply:
<span id="target1">Highlighted Text</span>

Each separate caller and individual target must have its own unique identity, but you can call the same target with more than one caller.

IE:
Caller1 - Target1, Caller2 - Target1

Try Me and Me 

<script type="text/javascript">
<!--
// Realised by apacheJeff
// www.huntingground.freeserve.co.uk
flashme=""
step=5
pause=3000
flashrate=250

function hlite_Init(){ // get page height and set top and bottom limit positions, prevent over-run
Top_Limit=10
Bottom_Limit=document.body.scrollHeight-(document.body.clientHeight+Top_Limit)
}

function whichway(callerID,targetID,dir,col){
if(dir=="down"){
CallerID=callerID
TargetID=targetID
Dir=dir
Col=col
scrolldown(CallerID,TargetID,Dir,Col)
}
else{
CallerID=targetID
TargetID=callerID
Dir=dir
Col=col
scrollup(CallerID,TargetID,Dir,Col)
}
}
function scrolldown(callerID,targetID,dir,col){ //scroll down
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2) // calling elements position - half window height
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2) // target elements position - half window height
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past page top
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit}
clearInterval(flashme)
flash(targetID,col)
while(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){ // scroll to target element
window.scrollBy(0,step)
}

if(dir=="down"){
Dir=dir
CallerID=callerID
TargetID=targetID
setTimeout("document.getElementById(TargetID).style.backgroundColor='';clearInterval(flashme); scrollup(CallerID,TargetID,Dir)",pause) 
}
}

function scrollup(callerID,targetID,dir,col){ //scroll up
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2)
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2)
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past top of page
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // stop at page bottom
clearInterval(flashme)
flash(callerID,col)

while(document.body.scrollTop >= caller_pos+5){
window.scrollBy(0,-step)
}
if(dir=="up"){
Dir=dir
CallerID=callerID
TargetID=targetID
setTimeout("document.getElementById(callerID).style.backgroundColor='';clearInterval(flashme); scrolldown(CallerID,TargetID,Dir)",pause) 
}
}

function flash(whichID,col){
if(document.getElementById(whichID).style.backgroundColor==""){
document.getElementById(whichID).style.backgroundColor=col
}
else{
document.getElementById(whichID).style.backgroundColor=""
}
WhichID=whichID
Col=col
flashme=setTimeout("flash(WhichID,Col)",flashrate)
}

// add  onload="hlite_Init()" to the opening BODY tag

// -->
</script>

<a id="caller1" href="#null" onclick="whichway('caller1','target1','down','gold')">Keyword</a> 

<span id="target1">Highlighted text</span> 

<a id="caller2" href="#null" onclick="whichway('caller2','target1','up','blue')">Keyword</a>

Note:
In order to test the script yourself, once you have copied the above into your page you need to make your page long enough to scroll. To do this add about 20 line breaks <BR> between caller1, target1, and caller2.

The script ended up longer than anticipated because I had to include some preventative measures to stop the browser locking up.
This happened because I am using the while statement, and through experimental mishaps (positioning the caller and/or target at the extreme top or bottom of the page) I found that if the scroll went over the upper and lower limits of the page the while loop would not terminate, hence a lockup.
Function Init and two if statements in each function prevent this from happening.

If you use this script and should have the misfortune to experience a lockup just increase the variable Top_Limit value