Do you have a F.A.Q. page and you wish to add some cool effects on it? This tutorial helps you to do that. I will show you how to add the effects using the power of JQuery.

Before going through the setup process, check the demo of the fancy F.A.Q. page.

To add the Scroll and the Color Fading effects I’ve used 2 JQuery plugins: Scroll.To & highlightFade. The former is used to add a scroll effect to the target element (ie: a question containing the answer) and the later is used to add a color fade effect to the text that should be read.

How to add the effects in my F.A.Q. page?

First, you need to include the necessary JS files: the JQuery Main File and the 2 plugins: Scroll.To and highlightFade:

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="javascript/jquery.highlightFade.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>

For the demo, I’ve used 7 questions. When the user clicks on one, the window will scroll to the answer and highlight it.

(content of init.js)

<script type="text/javascript">
<!--
$(document).ready(function() {
// Question 1
$('#question_1').click(function(){
$.scrollTo('#answer_1', {duration: 500, onAfter:function(){
$('#answer_1_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

// ................................
// 2, 3...7
// ................................

// Question 7
$('#question_7').click(function(){
$.scrollTo('#answer_7', {duration: 500, onAfter:function(){
$('#answer_7_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

// Go To TOP
$('.go_to_top').click(function(){
$.scrollTo('#top_zone', {duration: 500});
});

});
-->>
</script>

How it works?

After the DOM is ready and the link for the question is clicked the Scroll.To plugin is triggered and scrolls the window to the target element (ie: answer_1). After the scroll event is completed, the second plugin highlights the text that needs to be read (e: answer_1_text).

- – Question – -

<a id="question_1" onClick="return false;" href="#">How does it work?</a>

- – Target Element – -

<h3 id="answer_1">How does it work?</h3>

- – Text to Highlight – -

<div id="answer_1_text">It works using JQuery.</div>

- – JavaScript – -

// Question 1
$('#question_1').click(function(){
$.scrollTo('#answer_1', {duration: 500, onAfter:function(){
$('#answer_1_text').highlightFade({color:'rgb(255, 189, 112)', speed: 500});
} });
});

Before every answer there is an up arrow. If clicked it will scroll the window to the top.

How it’s done?

First, we need to set the ‘go_to_top’ class to the link:

<a class="go_to_top" href="#" onClick="return false;"><img src="http://www.your-site.com/images/arrow_up.png" border="0"></a>

When clicked, all the links that have this class will trigger the Scroll.To plugin:

// Go To TOP
$('.go_to_top').click(function(){
$.scrollTo('#top_zone', {duration: 500});
});

The ‘top_zone’ element should be added just after the tag:

<a id="top_zone"></a>

What’s the role of onclick=”return false;”? This is used to prevent the URL of the link from being open. If you remove it, when the links are clicked the window will scroll first to the top (instantly) and then the Scroll.To plugin will be triggered. This is not so nice especially for the ‘Go to Top’ links.

Check the source code of the demo page to understand the whole process.

Happy coding

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!