dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Setinterval to go to anchor smoothly

  1. #1
    Join Date
    Jul 2014
    Posts
    3

    Setinterval to go to anchor smoothly

    Hey guys,

    I have a script here that sets an interval and goes to an anchor. However, it switches instantly and not smoothly.
    How can I make this work?

    Code:
    <script>
    var myVar = setInterval(function(){myTimer()}, 1000);
    function myTimer() {
    window.location.hash="   The anchor   "; 
    clearInterval(myVar);
    }
    </script>
    I have found a script that works on a class and has a click event. This one slides smoothly to the anchor. I've tried to
    somehow combine them but so far no luck.

    Code:
    <script type='text/javascript'>
    jQuery(document).ready(function($) {
     
    	$(".scroll").click(function(event){		
    		event.preventDefault();
    		$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    	});
    });
    </script>
    Code:
    <a href="#nee" class="scroll">Link To Anchor</a>
    And last but not least; Can I build in an If, Else event. For instance, when the anchor is not found, nothing will happen?

    I appreciate your help!

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591
    What are you trying to do to the anchor?
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jul 2014
    Posts
    3
    Hey, thanks for your reply.

    What I want to happen is that when you open our website after 4 seconds it will smoothly slide down to an anchor below.

    http://jsfiddle.net/CsnD9/5/
    You can see with the scripts that i have posted, the page shoots automatically to the anchor after 1 second. The buttons there however, make the action slide.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,693
    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">
        <head>
    </head>
    <body>
    
    <p id="demo"></p>
    <a href="#nee" class="scroll">Link Text Here</a>
    
    <div id="jaja" style="width:200px; height:1000px; background-color:#0f0"></div>
    <div id="nee" style="width:200px; height:1000px; background-color:#456"></div>
    
    <a href="#demo" class="scroll">Scroll to top</a>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcScrollTo={
    
     Scroll:function(t,ms){
      var o=document.getElementById(t),t=o?this.pos(o):t,s=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
      typeof(t)=='number'&&t>=0?this.animate(s,t,new Date(),typeof(ms)=='number'&&ms>=20?ms:1000):null;
     },
    
     pos:function(o){
      var r=0;
      while(o){
       r+=o.offsetTop;
       o=o.offsetParent;
      }
      return r;
     },
    
     animate:function(f,t,srt,mS){
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      clearTimeout(oop.to);
      if (isFinite(n)){
       window.scrollTo(0,n);
      }
      if (ms<mS){
       oop.to=setTimeout(function(){ oop.animate(f,t,srt,mS); },10);
      }
      else {
       window.scrollTo(0,t);
      }
     }
    
    
    }
    
    
    setTimeout(function(){ zxcScrollTo.Scroll('nee',2000); },2000);
    /*]]>*/
    </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. #5
    Join Date
    Jul 2014
    Posts
    3
    Hey Vic, thanks for the quick reply and the effort you put into writing this script.

    I have looked into the scroll to element too but what I don't like about it is that it moves static. A one speed motion.
    What I like about the animation the buttons let it have is that it has an ease.

    I didnt come across a scroll to script that let it have this ease. Is it possible?

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,693
    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">
        <head>
    </head>
    <body>
    
    <p id="demo"></p>
    <a href="#nee" class="scroll">Link Text Here</a>
    
    <div id="jaja" style="width:200px; height:1000px; background-color:#0f0"></div>
    <div id="nee" style="width:200px; height:1000px; background-color:#456"></div>
    
    <a href="#demo" class="scroll">Scroll to top</a>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcScrollTo={
    
     Scroll:function(t,ms){
      var ms=typeof(ms)=='number'&&ms>=20?ms:1000,o=document.getElementById(t),t=o?this.pos(o):t,s=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
      typeof(t)=='number'&&t>=0?this.animate(s,t,new Date(),ms,Math.PI/(2*ms)):null;
     },
    
     pos:function(o){
      var r=0;
      while(o){
       r+=o.offsetTop;
       o=o.offsetParent;
      }
      return r;
     },
    
    
     animate:function(f,t,srt,mS,i){
      var oop=this,ms=new Date()-srt,n=(t-f)*Math.sin(i*ms)+f;
      clearTimeout(oop.to);
      if (isFinite(n)){
       window.scrollTo(0,n);
      }
      if (ms<mS){
       oop.to=setTimeout(function(){ oop.animate(f,t,srt,mS,i); },10);
      }
      else {
       window.scrollTo(0,t);
      }
     }
    
    
    }
    
    
    setTimeout(function(){ zxcScrollTo.Scroll('nee',2000); },2000);
    /*]]>*/
    </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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles