Scroll to Scroll

Question

I highlighted most of my code: 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; } 

What the program does, if the cursor is on <a> , then you scroll, <a> will be on top. I want you to scroll it, and it goes up. How it works?

Answer 1

You mean something like this: http://jsfiddle.net/GTSaz/1/

So, if, when you scroll, your mouse is above the element, the scrolling of which will be reset to have the element at the top of the viewport (in this case, 0,300).

In addition, if you do not want to specify the position (0,300) firmly, then you can find it in the script, see http://www.quirksmode.org/js/findpos.html

Answer 2

If I understand correctly, you can install it at the top of the page easier using something like:

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

Answer 3

I'm not sure what you want. Do you want a fixed div or window.scroll(0,0)

But, I combined your and Adam's code to get around the situation.

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;