Home Page

This page should help you set up a page where someone can click on a link and the page will scroll to another point on the page like you want.

There are basically 3 things that you will need to do

Number 1:

Because this is not a built in feature of Sandvox you will need to use "Raw HTML" objects to accomplish what you are wanting.

number1

You will need:

  • One Raw HTML object for the list of links that you want people to be able to click on that will take them to the other place on the page
  • You will need a sperate Raw HTML object for each set of text that you want people to be able to scroll too …
Let's just start with one first

In the first Raw HTML object you will want to include your links like this: 

<a id="firstbox">Link to first box</a>
link1

In the second Raw HTML object you will want to create the place where clicking the link will take people. like this:

<div class="firstbox">
<h3>Title … If You Want One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
link2


Number 2

Next, you will need to insert the following bit of javascript into the "Page Code Injection" window of Sandvox.


<script>
	$(document).ready(function(){
		$("#firstbox").click(function(){
			$(".firstbox").slideto({highlight: false});
		});
		
	});
</script>
pagecodelinks

Number 3

Suppose you have 5 links at the top of your page that when clicked will take the user to 5 targets on the same page.

You should have then added 6 Raw HTML Objects to your page:

  • One for the 5 links at the top of the page
  • 5 for the 5 target areas

Now you need to tell the javascript to look for and add thos 5 targets otherwise things will not work … here is how you do that:


<script>
	$(document).ready(function(){
		$("#firstbox").click(function(){
			$(".firstbox").slideto({highlight: false});
		});
		$("#secondbox").click(function(){
			$(".secondbox").slideto({highlight: false});
		});
		$("#thirdbox").click(function(){
			$(".thirdbox").slideto({highlight: false});
		});
		$("#fourthbox").click(function(){
			$(".fourthbox").slideto({highlight: false});
		});
		$("#fifthbox").click(function(){
			$(".fifthbox").slideto({highlight: false});
		});
		
	});
</script>


© Kuler Solutions 2012