Web Analytics Made Easy -
StatCounter Scroll to top script - CodingForum

Announcement

Collapse
No announcement yet.

Scroll to top script

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Scroll to top script

    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

  • #2
    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>



    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; Aug 22, 2011, 02:45 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment


    • #3
      Hy,
      Try this code:
      Code:
      <a href="#" onclick="window.scroll(0,0); return false;">Top</a>

      Comment


      • #4
        Code:
        <!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>
        Vic

        God Loves You and will never love you less.

        http://www.vicsjavascripts.org/Home.htm

        If my post has been useful please donate to http://www.operationsmile.org.uk/

        Comment


        • #5
          Originally posted by MarPlo View Post
          Hy,
          Try this code:
          Code:
          <a href="#" onclick="window.scroll(0,0); return false;">Top</a>

          Should be

          window.scrollTo(0,0);

          All the code given in this post has been tested and is intended to address the question asked.
          Unless stated otherwise it is not just a demonstration.

          Comment


          • #6
            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/...scroll-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.

            Comment

            Working...
            X