/    Sign up×
Community /Pin to ProfileBookmark

Setinterval to go to anchor smoothly

Copy linkTweet thisAlerts:
Jul 29.2014

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>[/CODE]

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]

[CODE]<a href=”#nee” class=”scroll”>Link To Anchor</a>[/CODE]

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!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootJul 30.2014 — What are you trying to do to the anchor?
Copy linkTweet thisAlerts:
@barthiltlauthorJul 31.2014 — 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.
Copy linkTweet thisAlerts:
@vwphillipsJul 31.2014 — [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>

[/CODE]
Copy linkTweet thisAlerts:
@barthiltlauthorJul 31.2014 — 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?
Copy linkTweet thisAlerts:
@vwphillipsAug 01.2014 — [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>

[/CODE]
×

Success!

Help @barthiltl spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...