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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page scroll script tweek

    Hi guys,

    I found this script online which is used to make a page scroll to a anchor on a page. It can be used to scroll to an anchor on the current page or can jump to another page then scroll to the appropriate anchor there.

    In order for this to work the links to trigger it must be in this format:

    Code:
    For same page scroll it must be <a href="#scrollhere"></a>
    For another page scroll it must be <a href="#ww.test.com/print.php#scrollhere"></a>
    I need to change the code so that I can use absolute links all the time, for both same page and different page scroll.

    Can this be done ?

    This is the code I have right now.

    Code:
    var jump=function(e)
    {
       if (e){
           e.preventDefault();
           var target = $(this).attr("href");
       }else{
           var target = location.hash;
       }
    
       $('html,body').animate(
       {
           scrollTop: $(target).offset().top
       },2000,function()
       {
           location.hash = target;
       });
    
    }
    
    $('html, body').hide();
    
    $(document).ready(function() {
        $('a[href^=#]').bind("click", jump);
    
        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show();
                jump();
            }, 0);
        }else{
            $('html, body').show();
        }
    	
    	 $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scrollup').fadeIn();
                } else {
                    $('.scrollup').fadeOut();
                }
            });
     
            $('.scrollup').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 400);
                return false;
    			$('.scrollup').fadeOut();
            });	
    });

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    the link on page1

    Code:
    <a href="Page2.htm?tom" >link</a>
    where tom is the ID name of an element on page 2


    the script on page 2

    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>
    <script type="text/javascript">
    
    function GoTo(id,ms){
     var obj=document.getElementById(id),t=0;
     if (obj){
      while(obj){
       t+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      animate(0,t,new Date(),ms)
     }
    }
    
     function animate(f,t,srt,mS){
      var ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       window.scrollTo(0,n);
      }
      if (ms<mS){
       setTimeout(function(){ animate(f,t,srt,mS); },10);
      }
     }
    
    
    </script>
    </head>
    <body onload="GoTo(window.location.toString().split('?')[1],5000);" >
    
    
    <div style="height:3000px" ></div>
    <a id="tom" ></a>
    <div style="height:3000px" ></div>
    </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/


  •  

    Posting Permissions

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