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 div还是window.scroll(0,0)

？

但是，我已将你的和Adam的代码结合起来，以解决这个问题。

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;

滚动时滚动

3 个答案: