Anchor Tag To Jump To A Section On Another Page

JavaScript
1

Hi all,

Ok, I’m not too sure how to ask this question or explain it but I’ll give it a go.

I’m creating a new site, on the home page there are 4 links that bring the user to a section (div, or in this case a h2 with an id) on another page.

But the thing is, I have a menu that has a fixed position, so when scrolling down the page it will stay in the same position. So, when one of the links on the home page is clicked, the user is brought to the page and the h2 with the id (and some of the content) is behind the menu, if you know what I mean.

Is there a way I can position the h2 and content below the top of the page (90px is the height of the menu, so 90px below the top of the page).

I have implemented something similar (using a jQuery scroll to) but not exactly what I am looking for, on my own site - LINK - and code:

$(document).ready(function() {
				
				$('.scroll-to-home').click(function (e) {
					e.preventDefault();
					scrollToElement('#homeLink', 1000);
				});

				$('.scroll-to-myWork').click(function (e) {
					e.preventDefault();
					scrollToElement('#myWorkLink', 1000, -130);
				});
				
				$('.scroll-to-aboutMe').click(function (e) {
					e.preventDefault();
					scrollToElement('#aboutMeLink', 1000, -130);
				});
				
				$('.scroll-to-contact').click(function (e) {
					e.preventDefault();
					scrollToElement('#contactLink', 1000, -130);
				});
			
		});

I can provide a link to current site I am having issues with if needed.

Cheers,
Al.

2

Something like this?

http://lea.verou.me/2011/05/change-url-hash-without-page-jump/

3

When I had to deal with SinglePage site with a fixed header, I just used the known height of the header (if your header can change height then you first have to measure the height of the header in Javascript) and used the scrollTo() function to, after any click on a link whose href began with a hash #, move back up by that number of pixels.


//inside some func
        var address = anchor.hash.substr(1),
            destination = document.getElementById(address);

        if (!destination) {
            return true; //let the anchor work like usual
        }
//in this example my header was about 85px high or so.
        window.scrollTo(0, (destination - 90)); //just make the destination 90px less than where top ended up
      
//preventDefault and propogation stuff here...

I didn’t end up using jQuery scroll, but that’s probably easier and would make the jump back smoother.

In any case you wouldn’t need all this code


		$('.scroll-to-home').click(function (e) {
					e.preventDefault();
					scrollToElement('#homeLink', 1000);
				});

				$('.scroll-to-myWork').click(function (e) {
					e.preventDefault();
					scrollToElement('#myWorkLink', 1000, -130);
				});
				
				$('.scroll-to-aboutMe').click(function (e) {
					e.preventDefault();
					scrollToElement('#aboutMeLink', 1000, -130);
				});
				
				$('.scroll-to-contact').click(function (e) {
					e.preventDefault();
					scrollToElement('#contactLink', 1000, -130);
				});

if this isn’t to run on all links with href’s starting with #, then make a list/array with the ones you want to hit --or better yet give them all a class and call them with


$('.theclass').click(function(e) {
    e.preventDefault();
    var destination = $('#'+this.hash.substr(1));
    scrollToElement(destination,  // okay I have no idea what these numbers are... 1000, -130);
});

but anyway the 130px (or 90 as you said) you should safely be able to always give, because if you’re at the top of the page, well then the browser just ignores that because it can’t get any closer to the top than the top. Similarly it may ignore when near the bottom of the page if the browser window is too tall, meaning the destination shows up in the middle or bottom of the page (you could highligh the destination in some way using :target instead to help with this).

4

Thanks for the replies guys, exactly what I am looking for!