...

View Full Version : Scroll to top script



neodjandre
08-22-2011, 03:12 AM
Hello,

Could anyone plz recommend a script that adds a "move to top" box for our .php site similar to the one we have on our blog site:

http://sand.greekconcierge.com/

many thanks,
Andy

Philip M
08-22-2011, 08:39 AM
No Javascript involved.

At the top of your HTML page add
<p><a name="Pagetop"></a></p>

and where you want your 'Go To Top' button
<p><a href="#Pagetop"><img src="top.gif" alt ="Go to top of page" title ="Go to top of page" width="54" height="29" border = "0" ></a></p>

http://www.guildford0gaugegroup.org.uk/top.gif

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

MarPlo
08-22-2011, 08:44 AM
Hy,
Try this code:

<a href="#" onclick="window.scroll(0,0); return false;">Top</a>

vwphillips
08-22-2011, 08:59 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
BODY {
height:2000px;
}

#float {
position:fixed;z-Index:101;visibility:hidden;right:50px;bottom:50px;width:100px;height:30px;background-Color:red;
}


/*]]>*/
</style>

</head>

<body>
<div id="float" ></div>


<script type="text/javascript">
/*<![CDATA[*/

function zxcTop(o){
var oop=this,obj=document.getElementById(o.ID),ms=o.Duration,view=o.View;
this.obj=obj;
this.ms=typeof(ms)=='number'?ms:1000;
this.view=typeof(view)=='number'?view:0;
this.dyl=null;
oop.visibility();
obj.onmouseup=function(){ oop.scroll(); }
setInterval(function(){ oop.visibility(); },100);
}

zxcTop.prototype={

visibility:function(){
this.obj.style.visibility=this.top()>=this.view?'visible':'hidden';
},

scroll:function(){
clearTimeout(this.to);
this.animate(this.top(),0,new Date().getTime(),this.ms);
},

animate:function(s,f,srt,mS){
var oop=this,op=oop.oop,ms=new Date().getTime()-srt,d=(f-s)/mS*ms+s;
if (isFinite(d)){
oop.now=d;
}
window.scrollTo(0,oop.now);
if (ms<mS){
oop.dly=setTimeout(function(){oop.animate(s,f,srt,mS); },10);
}
else {
window.scrollTo(0,f);
}
},

top:function(){
if (window.innerHeight) return window.pageYOffset;
else if (document.documentElement.clientHeight) return document.documentElement.scrollTop;
return document.body.scrollTop;
}


}


new zxcTop({
ID:'float', // the unique ID name of the 'float' element. (string)
Duration:1000, //(optional) the scroll duration in milli seconds. (number, default = 1000)
View:500 //(optional) the 'float' element top visibility distance. (number, default = 0)
});





/*]]>*/
</script>

</body>

</html>

Philip M
08-22-2011, 09:03 AM
Hy,
Try this code:

<a href="#" onclick="window.scroll(0,0); return false;">Top</a>


Should be

window.scrollTo(0,0);

sophieasia
08-23-2011, 11:57 AM
You could just use a regular anchor which would jump straight to the top, or you could make it slide with jquery plugins.

Regular Anchor
<a name="anchortarget">.</a> <!-- Where you want to go (top of page). -->
<a href="#anchortarget">Img Here</a> <!-- Link to the top of page. -->

Or with jquery...
http://jquery.com/
And LocalScroll and ScrollTo
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Then add this into your header.
<script type='text/javascript' src='http://example.com/jquery-1.5.2.min.js'>
</script>
<script src="http://example.com/jquery.localscroll-1.2.7-min.js"; type="text/javascript">
</script>
<script src="http://example.com/jquery.scrollTo-1.4.2-min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>

And then the anchors like this...
<a name="anchorTarget5" id="anchorTarget">.</a>
<a href="#anchorTarget5" class="anchorLink">Img Here</a>

But that's probably not what your looking for. And there is probably a simpler way to do it. But hey. That's just an option.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum