PDA

View Full Version : Resolved Scroll to NOT jump to advice.



theremotedr
05-05-2015, 09:35 PM
I have a link which jumps to a place on the same page and also another link which scrolls to a place on the same page.

Looking at it I would like to change the jump to with the scroll to as it looks much better.
Here is a page in question http://www.theremotedoctor.co.uk/accaudi.html#topnav
By clicking the Flip remote key pad the scroll to operates.
By clicking the return to menu the Jump to operates.

I would like the scroll to applied to the return to menu.
I did have some help/advice for this scroll to a week ago etc but can't find the original post.
Please advise how/what I need to do.

Many thanks.

vwphillips
05-06-2015, 08:33 AM
<!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>
</head>

<body>
<a id="top" >anchor</a>
<input type="button" name="" value="Bottom" onclick="zxcScrollTo.Scroll({AnchorID:'bottom',Animate:1000});" />
<div style="height:1500px" ></div>
<input type="button" name="" value="Top" onclick="zxcScrollTo.Scroll({AnchorID:'top',Animate:1000});" />
<a id="bottom" >anchor</a>

<script type="text/javascript">
/*<![CDATA[*/

var zxcScrollTo={

Scroll:function(o){
var a=document.getElementById(o.AnchorID),ms=o.Animate,s=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
if (a){
this.animate(this,s,this.pos(a),new Date(),typeof(ms)=='number'&&ms>0?ms:1000);
}
},

animate:function(o,f,t,srt,mS){
clearTimeout(o.to);
var ms=new Date()-srt,x=(t[0]-f[0])/mS*ms+f[0],y=(t[1]-f[1])/mS*ms+f[1];
if (isFinite(x)&&isFinite(y)){
window.scrollTo(x,y);
}
if (ms<mS){
o.to=setTimeout(function(){ o.animate(o,f,t,srt,mS); },10);
}
else {
window.scrollTo(t[0],t[1]);
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}


}

/*]]>*/
</script>

</body>

</html>

theremotedr
05-06-2015, 09:48 AM
Hi,
Thanks for the reply.
Is it not possible to use the existing code as opposed to adding this long code ?

theremotedr
05-07-2015, 01:55 PM
I have used the existing jQuery code shown below

$(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);

Then added this code to each item in question "editing each car make etc"
<li><a href="accaudi.html" #ios" class="scroll">Audi</a></li>

Used this anchor
<a id="ios"></a>

First of all i only applied it to one line & on the iphone it worked perfect.
Thinking all was ok i then added it to every line in question but then clicking on Bmw,Ford,Vw etc no scroll was then there at all ?

What i am trying to gain is when a selection is made on the iphone just to be taken to that part of the page without manually doing it.
I can jump to the part of the page in question but its a touch crude.

Any advice welcome.

Above code now removed from site as i need it to be working whilst i fix the issue.