Scrollto滾動時

Question

我分離出的最讓我可以在我的代碼到這個：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; 
} 

什麼該程序如果光標位於<a>上，則您滾動，<a>將位於頂部。我想要的是你滾動它，它在頂部。它如何運作？

Answer 1

你的意思是這樣的：http://jsfiddle.net/GTSaz/1/

所以，如果，當你滾動，你的鼠標移動到該元素的滾動將在此跳下有元素在視口的頂部（0,300案件）。

另外，如果你不想硬編碼位置（0,300），那麼你可以在腳本中檢測，看http://www.quirksmode.org/js/findpos.html

Answer 2

如果我理解正確的話，你可以在頂部設置它頁面更簡單，使用類似：

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

Answer 3

我不太確定你想要什麼。你想要一個fixed股利或window.scroll(0,0)

但是，我已經結合你的和亞當的代碼，以解決方案的情況。

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

標記：

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