Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 107
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Scroller

Exempel

Sektion 1 / Sektion 2 / Sektion 3 / Sektion 4 / Sektion 5 / Sektion 6
Sektion 1
Tillbaks
Sektion 2
Tillbaks
Sektion 3
Tillbaks
Sektion 4
Tillbaks
Sektion 5
Tillbaks
Sektion 6
Tillbaks

Kod


<script type="text/javascript">
var scroller={
	getScrollX:function(){ return(document.all)?document.body.scrollLeft:window.pageXOffset; },
	getScrollY:function(){ return(document.all)?document.body.scrollTop:window.pageYOffset; },
	getAnchorPos:function(name,c){
		var arr=document.getElementsByTagName("a"); var elm=null;
		for(a=0;a<arr.length;a++){ if(arr[a].name==name){ elm=arr[a] }}
		if(!elm) return(0); 
		var x=y=0;
		while(elm.offsetParent){ x+=elm.offsetLeft; y+=elm.offsetTop; elm=elm.offsetParent; }
		return((c=="x")?x:y);
	},
	scroll:function(x,y){
		var scrollx=this.getScrollX(); var scrolly=this.getScrollY(); 
		if(Math.abs(scrollx-x)<=1&&Math.abs(scrolly-y)<=1){
			window.scrollTo(x,y);
		} else {
			window.scrollTo(parseInt(scrollx+(x-scrollx)/2),parseInt(scrolly+(y-scrolly)/2));
			if(scrollx!=this.getScrollX()||scrolly!=this.getScrollY()){
				this.timer=setTimeout("scroller.scroll("+x+","+y+");",50);
			} else {
				window.scrollTo(x,y);
			}
		}
	},
	scrollTo:function(obj){
		var name=obj.href.substring(obj.href.indexOf("#")+1);
		this.scroll(0,this.getAnchorPos(name));
		return false;
	}
}
</script>
<a name="top"></a>
<a href="#section1" onclick="return scroller.scrollTo(this);">Sektion 1</a> /
<a href="#section2" onclick="return scroller.scrollTo(this);">Sektion 2</a> /
<a href="#section3" onclick="return scroller.scrollTo(this);">Sektion 3</a> /
<a href="#section4" onclick="return scroller.scrollTo(this);">Sektion 4</a> /
<a href="#section5" onclick="return scroller.scrollTo(this);">Sektion 5</a> /
<a href="#section6" onclick="return scroller.scrollTo(this);">Sektion 6</a>
<br />
<a name="section1"></a><div style="height:250px;"><strong>Sektion 1</strong><br/><a href="#top" onclick="return scroller.scrollTo(this);">Tillbaks</a></div>
<a name="section2"></a><div style="height:250px;"><strong>Sektion 2</strong><br/><a href="#top" onclick="return scroller.scrollTo(this);">Tillbaks</a></div>
<a name="section3"></a><div style="height:250px;"><strong>Sektion 3</strong><br/><a href="#top" onclick="return scroller.scrollTo(this);">Tillbaks</a></div>
<a name="section4"></a><div style="height:250px;"><strong>Sektion 4</strong><br/><a href="#top" onclick="return scroller.scrollTo(this);">Tillbaks</a></div>
<a name="section5"></a><div style="height:250px;"><strong>Sektion 5</strong><br/><a href="#top" onclick="return scroller.scrollTo(this);">Tillbaks</a></div>
<a name="section6"></a><div style="height:250px;"><strong>Sektion 6</strong><br/><a href="#top" onclick="return scroller.scrollTo(this);">Tillbaks</a></div>
<div style="height:300px;"></div>

Kommentar

Scriptet ger dig möjligheten att skapa en mjuk scroll till angivet ankare. Du kan även scrolla till en fast koordinat med scroller.scroll(x,y) där x och y är koordinater på sidan.

,