Scrollto while scrolling

Question

I isolated the most I can my code into this : http://jsfiddle.net/uXVWu/

HTML :

<a id="stopHere" >Hi !</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

JS :

var theAnchor=document.getElementById("stopHere");
var tempX,tempY;

function stopScroll(e)
{
    var c=parseInt(document.getElementById('stopHere').offsetWidth);
    var d=parseInt(document.getElementById('stopHere').offsetHeight);
    if(tempX<=c&&tempY<=300+d&&0<=tempX&&300<=tempY)window.scrollTo(0,200);
}

function update(e)
{
    var doc=document.documentElement;
    var body=document.body;
    tempX=(e.pageX)?e.pageX:e.clientX+(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-(doc&&doc.clientLeft||body&&body.clientLeft||0);
    tempY=(e.pageY)?e.pageY:e.clientY+(doc&&doc.scrollTop||body&&body.scrollTop||0)-(doc&&doc.clientTop||body&&body.clientTop||0);
}

window.onscroll=stopScroll;
window.onmousemove=update;

CSS :

#stopHere
{
    float:left;
    width:100%;
    border:1px solid black;
    text-align:center;
}

What does the program is that if the cursor is on the <a>, then you scroll, the <a> will be on the top. What I want is that you scroll over it and it goes on the top. How can it works?

Answer 1

Do you mean something like this: http://jsfiddle.net/GTSaz/1/

So that if, when you are scrolling, your mouse is over the element the scrolling will jump down to have the element at the top of the viewport (0,300 in this case).

Also, if you don't want to hardcode the position (0,300) then you can detect in in the script, see http://www.quirksmode.org/js/findpos.html

Answer 2

If I'm understanding correctly, you could set it up at top of the page simpler using something like:

document.getElementById('stopHere').style.position="fixed"
document.getElementById('stopHere').style.top="0"