1. I've called the jquery file and code for the scrolling from my header:
Code: Select all
{process_pagedata}
<!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>
<title>{title} - {global_content name='sitename'}</title>
{metadata}
<__script__ src="uploads/scripts/jquery-1.2.3.js" type="text/javascript"></__script>
{literal}
<__script__ language="javascript" type="text/javascript" >
$(document).ready(function() {
anchor.init()
});
anchor = {
init : function() {
$("a.jqueryScrollto").click(function () {
elementClick = $(this).attr("href")
destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100 );
return false;
})
}
}
</__script>
{/literal}
{stylesheet}
</head>
Code: Select all
<ul>
<li>{anchor anchor='faq_01' text='Question 1' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_02' text='Question 2' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_03' text='Question 3' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_04' text='Question 4' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_05' text='Question 5' class='jqueryScrollto'}</li>
</ul>
<hr />
<a id="faq_01" name="faq_01"></a>
<p><strong>Question 1</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<a id="faq_02" name="faq_02"></a>
<p><strong>Question 2</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<a id="faq_03" name="faq_03"></a>
<p><strong>Question 3</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<a id="faq_04" name="faq_04"></a>
<p><strong>Question 4</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<a id="faq_05" name="faq_05"></a>
<p><strong>Question 5</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
When I create a static version of this site, it works fine.
i.e the link would be
Code: Select all
<li><a href="#faq_01" title="What are stem cell therapies?" class="jqueryScrollto">Question 1</a></li>
Code: Select all
<li><a href="/mysite/index.php?page=faqs&hl=eng#faq_01" class="jqueryScrollto">Question 1</a></li>
Does anyone know why, or see what I am doing wrong? Am I declaring something wrong? Or if anyone knows a better script out there, that would be great to know about it
Thanks,
Joe Cannes