scrollTo durante lo scorrimento

Question

Ho isolato il più che posso il mio codice in questo modo: 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; 
} 

Cosa fa il programma è che se il cursore è su <a>, quindi si scorre, il <a> sarà in alto. Quello che voglio è che lo scorri e vada in cima. Come può funzionare?

Answer 1

Vuoi dire qualcosa di simile: http://jsfiddle.net/GTSaz/1/

Così che se, quando si sta scorrendo, il mouse è sopra l'elemento lo scorrimento salterà giù per avere l'elemento in cima alla finestra (0300 in questo Astuccio).

Inoltre, se non si vuole hardcode la posizione (0300), allora è possibile rilevare in nello script, vedere http://www.quirksmode.org/js/findpos.html

Answer 2

Se ho la comprensione correttamente, è possibile impostare fino in cima alla pagina più semplice usando qualcosa come:

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

Answer 3

Non sono proprio sicuro di cosa vuoi. Vuoi un fixed div o window.scroll(0,0)

Ma, ho combinato il codice di tuo e Adam, per risolvere la situazione.

http://jsfiddle.net/c3CJF/1/

Markup:

<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 /> 

CSS:

#stopHere 
{ 
    position:absolute; 
    top:300px; 
    left:0px; 
    width:100%; 
    border:1px solid black; 
    text-align:center; 
} 

Javascript:

var theAnchor=document.getElementById("stopHere"); 
var tempX,tempY; 
var docBody = document.body, 
    docEl = document.documentElement, 
    scrollElement = /WebKit/.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? docBody : docEl; 
var lastScrollTop = scrollElement.scrollTop; 
function stopScroll(e) 
{ 
    // Extra check to make if your scroll passes the element on its movement 
    if((scrollElement.scrollTop - lastScrollTop + tempY) >= 300){ 
     window.scrollTo(0,300); 
    } 
    lastScrollTop = scrollElement.scrollTop; 
    var c=parseInt(document.getElementById('stopHere').offsetWidth); 
    var d=parseInt(document.getElementById('stopHere').offsetHeight); 
    /* the if is to test if the mouse is over the anchor */ 
    if(tempX<=c&&tempY<=300+d&&0<=tempX&&300<=tempY)window.scrollTo(0,300); 
} 

function update(e)//to have the x and y of the mouse 
{ 
    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;