jump to top / back to top / ( For FAQ Page )

**banka** · 02-13-2008, 11:37 PM

Im looking for a script for my FAQ page. At the top of the page it has 10 questions, if the user clicks the question it will shoot down the page to the selected question. From here the user only need to click " back to top" or " jump to top" and it will return to the top of the page with the 10 questions to choose from again.

I thought i saw one on DD a while ago but cant seem to find it now.

**Jas** · 02-14-2008, 03:00 AM

If I understand this correctly, I believe the JavaScript function for scrolling to the top is something like this:

Code:

<a href="JAVASCRIPT:scroll(0,0)">Top</a>

Or

Code:

<input type="button" value="Top" onclick="scroll(0,0)">

I don't know if you already had the first part (going to the questions) or not, so incase you need that as well, you can use anchor tags. Put this by the questions:

Code:

<a name="Q1"></a>

(Change the name to Q1, Q2, Q3 and so on). And here is the link:

Code:

<a href="FAQ.html#Q1">Question</a>

Here is a sample:

HTML Code:

    <html>
<head>
    <title>FAQ</title>
</head>
<body>
    <a href="FAQ.html#Q1">What's my name?</a><br>
    <br>
    <br>
    <a name="Q1">Q. What's my name?</a><br>
    A. Bob<br>
    <a href="JAVASCRIPT:scroll(0,0)">Top</a>
</body>
    </html>

**tech_support** · 02-14-2008, 07:53 AM

Or put <a name="top"></a> right after the body.

Then you could just do this:

HTML Code:

<a href="#top">Top</a>

**banka** · 02-15-2008, 12:14 AM

thanks guys! I have made up a test page using the advice above. My problem now is when i select a question it does shoot down the page but the question is shown in the middle of the screen and is surrounded by all the other answers. This means the user still needs to search aroundittle bit with there eyes to find it. i am very pedantic. I have seen ones were the selected question shoots down and the answer is at the yop of the screen. Anyone know how this is possible?

*will donate a small fee through paypal when i get it right. thanks.

**Jas** · 02-15-2008, 03:28 PM

Well, the anchor is going to be at the top when you click the link. In other words:

Code:

<a href="#bookmark">Click ME!</a>
<br><br><br><br>
<a name="bookmark">I'm at the top of the screen when you click the above link!</a>

Now, that only works if there is enough space below the content for the page to scroll down that far, so the above example won't work unless you do something like:

Code:

<a href="#bookmark">Click ME!</a>
<br><br><br><br>
<a name="bookmark">I'm at the top of the screen when you click the above link!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

EDIT:

*will donate a small fee through paypal when i get it right. thanks

Money isn't necessary . I think I speak for most when I say that we help because we've been helped

And here is a full example:

Code:

<a href="#q1">Question 1</a><br>
<a href="#q2">Question 2</a><br>
<a href="#q3">Question 3</a><br>
<a href="#q4">Question 4</a><br>
<a href="#q5">Question 5</a><br>

<br><br><br>

<a name="#q1">Question 1</a><br>
    Content Goes Here. La la la la la<br>
    La la l al al al a<br>
    <a href="JAVASCRIPT:scroll(0,0)">Top</a><br><br>
<a name="#q2">Question 2</a><br>
    Content Goes Here. La la la la la<br>
    La la l al al al a<br>
    <a href="JAVASCRIPT:scroll(0,0)">Top</a><br><br>
<a name="#q3">Question 3</a><br>
    Content Goes Here. La la la la la<br>
    La la l al al al a<br>
    <a href="JAVASCRIPT:scroll(0,0)">Top</a><br><br>
<a name="#q4">Question 4</a><br>
    Content Goes Here. La la la la la<br>
    La la l al al al a<br>
    <a href="JAVASCRIPT:scroll(0,0)">Top</a><br><br>
<a name="#q5">Question 5</a><br>
    Content Goes Here. La la la la la<br>
    La la l al al al a<br>
    <a href="JAVASCRIPT:scroll(0,0)">Top</a><br><br>

<!-- It's better to use a div, if you know CSS, but if you don't, you can use breaks //-->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

**banka** · 02-17-2008, 12:21 PM

Jas, you are an absoloute legend. I appreciate your help so much. This is just what i needed to satisfy my fussy design needs.

Thanks again. Im so happy !!!!!!!

**I will endevour to return the favour to someone else in the future.