8

我尽可能地将我的代码隔离到这个：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>将在顶部。我想要的是你滚动它并且它在顶部。它如何运作？

4

3 回答 3

2

如果我理解正确，您可以使用以下内容在页面顶部更简单地设置它：

document.getElementById('stopHere').style.position="fixed"
document.getElementById('stopHere').style.top="0"
于 2012-05-23T18:51:32.133 回答
2

你的意思是这样的：http: //jsfiddle.net/GTSaz/1/

因此，当您滚动时，如果您的鼠标悬停在元素上方，则滚动将向下跳转以使该元素位于视口的顶部（在本例中为 0,300）。

此外，如果您不想硬编码位置 (0,300)，那么您可以在脚本中检测到，请参阅http://www.quirksmode.org/js/findpos.html

于 2012-05-23T14:41:42.333 回答
0

我不太确定你想要什么。你想要一个fixeddiv 还是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;
于 2012-05-25T15:22:12.490 回答