ScrollTo mientras se desplaza

Question

me aisló el que pueda mi código más en esto: 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; 
} 

Lo el programa es que si el cursor está en el <a>, entonces se desplaza, el <a> estará en la parte superior. Lo que quiero es que te muevas sobre él y vaya arriba. ¿Cómo puede funcionar?

Answer 1

¿Quieres decir algo como esto: http://jsfiddle.net/GTSaz/1/

Así que si, cuando se está desplazando, el puntero del ratón se encuentra sobre el elemento del desplazamiento saltará hacia abajo para tener el elemento en la parte superior de la ventana (0300 en este caso).

Además, si usted no desea codificar la posición (0300) entonces se puede detectar en el guión, ver http://www.quirksmode.org/js/findpos.html

Answer 2

Si estoy entendiendo correctamente, puede configurarlo en la parte superior de la página más simple usando algo como:

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

Answer 3

No estoy muy seguro de qué es lo que quiere. ¿Desea un fixed div o window.scroll(0,0)

Pero, he combinado el código de su y de Adán, para solucionar la situación.

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

de marcado:

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