I have an anchor link which links to another page. When it is clicked, by default it goes to the top of the next page. I want it brought to a certain position of the page. How do I do this (either with a jQuery slide effect or normal html)?
For instance, when .sample a is clicked I want it to bring you to a certain position of the linking page.
You can do this with simple html using the hash url "#". For example:
<a id="somelocation"></a>
Can be auto-scrolled into view by clicking a link like:
<a href="#somelocation">Go to somelocation on this page</a>
This can be done with links to other pages too.
<a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>
First thing you'll have to do is to define an anchor somewhere in the target page:
<a name="myAnchor" />
Let's say the target page is called "website.html". You will then have to append the anchor to the link:
<a href="website.html#myAnchor">Click here</a>
Best wishes,
Fabian
Use an anchor like this in your target document:
<a name="anchor1"></a>
or
<a id="anchor1"></a>
and in your source document:
<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>
or within the same document:
<a href="#anchor1">Go to anchor 1</a>
OK, so this answer is very specific to your problem.
The reason none of the other solutions worked is that your div elements that would match the anchor are hidden when the page loads.
To prove this out, click on of your links on the home page, and see it not work. Then change the hash from #whatever to #bgaboutbody and you will see it work properly.
So, using something like this will make it work for you. Basically, if there is a hash, it will animate down to the correct spot. Put this in a script block at the very bottom of your page (right above the </body> tag)
window.setTimeout(function(){
if(window.location.hash){
var $target = $(window.location.hash).closest("#bgaboutbody");
if($target.length)
$('html, body').animate({scrollTop: $target.offset().top}, 1000);
}
}, 100);
Learn to use fallbacks:
It is always better to make sure your content will load without JavaScript on a sales site like this. (In a web app I feel that is a different discussion). I would recommend using the solution I gave you to this question where you add a js class to the html element in the <head> of the page. Then scope your CSS like this:
.js #contact, .js #about, etc { display:none }
So it will only be hidden if JS is present. Additionally, since this solution is also using JavaScript its important they are visible if JS is disabled so it still works.