SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor Tag To Jump To A Section On Another Page

    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:

    HTML 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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.


    Code:
    //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
    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
    Code:
    $('.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. #4
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies guys, exactly what I am looking for!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •