PDA

View Full Version : Scrollable Content JS II Problems with Anchors within content



dilly85
06-14-2006, 10:42 PM
I have a problem in making anchor points for moving in between the content.

I have a list of FAQ's with links at the top of the DIV tag these work perfect going to the answers section in the content,

however once you scroll down to the very bottom of the scrollable layer the back to top link doesnt work as it should i have tried putting alsorts of link images tags and even the reference made by jscheuer1 in a previous post

but nothing works to the desired effect here is the page in question

http://www.ddee.co.uk/testsite/iolif...e_opp_faqs.htm

any help will be appreciated, thanks in advance


regards

dilly85
06-15-2006, 09:11 AM
sorry this is the link
http://www.ddee.co.uk/testsite/iolifetestsite/licence_opp_faqs.htm

djshaw
09-01-2006, 07:36 PM
I am doing the exact same thing with a FAQ page.

I don't have much time to explain it, but I have figured out a way to make anchors work perfectly with the scrollable content script. This method works no matter what browser/platform/text-size the user is using.

I combine the clickNav function provided by jscheuer1 here:
http://www.dynamicdrive.com/forums/archive/index.php/t-6639.html
with this script:
http://javascripttoolbox.com/lib/objectposition/

Here are some code snippets:

<script language="JavaScript1.2" type="text/javascript" src=".position.js"></script>

<SCRIPT TYPE="text/javascript">
function clickNav(coord) {
if (iens6)
crossobj.style.top=Math.floor(coord)+'px'
if (ns4)
crossobj.top=Math.floor(coord)
return false;
}

function anchor_jump(anchor_name) {
var pos1 = Position.get('top');
var pos2 = Position.get(anchor_name);
var top1 = pos1["top"];
var top2 = pos2["top"];
clickNav(-(top2 - top1));
}
</SCRIPT>

.... snip ....

<!--INSERT CONTENT HERE-->
ORDERING POLICY<a name="top" id="top"> </a><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
OUR RETURN POLICY<a name="return_policy" id="return_policy"> </a><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
SHIPPING<a name="shipping" id="shipping"> </a><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
<!--END CONTENT-->

.... snip ....

<!-- links to anchor positions -->
<a href="#" onClick="clickNav(0)">Ordering Policy</a>
<a href="#" onClick="anchor_jump('return_policy')">Return Policy</a>
<a href="#" onClick="anchor_jump(shipping')">Shipping</a>