Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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; 08-22-2011 at 07: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.

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hy,
    Try this code:
    Code:
    <a href="#" onclick="window.scroll(0,0); return false;">Top</a>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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/

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote 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.

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Location
    221B Baker Street
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •