Javascript Page Scrolling

benmillar409 · March 22nd, 2010, 07:29 AM

Hi,

I am new to javascript, in fact this is the first time I have used it,however I am adding this function to my website:

<a href="JavaScript:pageScroll()">Back to Top</a>

function pageScroll() {
window.scrollBy(0,-150); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

although evertime this function is clicked on it scrolls back to the top, however the action is still active everytime you try to scoll down it automatically goes back to the top. How do I stop the function from working once it has scrolled back to the top?? Any help would be much appreciated.

Thanks...

PeterPeiGuo · March 22nd, 2010, 09:36 AM

It scrolls on its own because the timer is still on. Instead of using scrollBy, use scrollTo:

Code:

<script type="text/javascript">
	function pageScroll() {
		window.scrollTo(0,0); 
	}
</script>

benmillar409 · March 22nd, 2010, 10:15 AM

Hi, thanks for that although the action it makes when you click the link,you can see it scroll up at a set speed rather than jumping to the to.

It is this self scrolling action that I want to impliment throughout my website, however I am not sure how to make it stop the scrolling action once it has reached its final point (the top of the page)

If you can help me with this I would be very grateful.

My code again :

Code:

<script language="JavaScript">
function pageScroll() {
    	window.scrollBy(0,-50); // horizontal and vertical scroll increments
    	scrolldelay = setTimeout('pageScroll()',5); }

Thanks

PeterPeiGuo · March 22nd, 2010, 10:21 AM

This should do it:

Code:

<script type="text/javascript">
function pageScroll() {
    	window.scrollBy(0,-50); // horizontal and vertical scroll increments
    	if (window.pageYOffset) {
		scrolldelay = setTimeout('pageScroll()',5); 
	}
}
</script>

benmillar409 · March 22nd, 2010, 11:12 AM

Thanks for that, your an absolute star, it works perfect.

I was also just wondering, is it possible to give this function an id that relates to the link on the page as I was going to have one that would scroll down the page aswell and maybe one that only scrolls small sections of the page...

althought how do I relate each different function with each link?

Thanks again...