Linking to Anchors FROM pages vs. ON pages

[Christopher Simmons]

I’m using the moonrise theme with a fixed header. From the main nav, most of the options link to anchors on the home page (#two, #three, etc.). When I navigate this way everything works great.

A couple of the nav options link to their own pages. Here’s where I have a problem.

When linking BACK to an anchor on the home page from another page, par of the content is obscured by the fixed header.

I’ve tried adding padding and/or margins to the anchors via CSS, but this of course effects the positioning when linking from within the homepage as well.

What I want to be able to do is adjust the positioning when ONLY when the anchor is linked to from another page.

Is this possible?

Thanks in advance for any help!

[Bill Robbins]

Hello Christopher,

I can appreciate the situation there. When you click on a link that has a selector ID at the end of the URL, the browser will place the top edge of that selector at the top of the browser. As you’ve noticed that causes trouble with fixed height headers since they can end up overlapping the content.

For visiting links within a page, the theme uses a bit of javascript to give smooth scrolling and also to adjust the amount that’s scrolled. It’s set to leave the top edge 100 pixels from the top as it finishes the scroll effect. That’s how links on the front page are not obscured.

But I don’t know of a way to apply a similar positioning adjustment to links from another page to a section of the home page.

One option would be to hide the logo except for when the header was at the top of the screen. If you’d like to try that, here’s what to do:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header.movement #logo {
   	display: none;
   }
   

3. Update your settings.
4. Go to the Appearance section in your WordPress dashboard and choose Edit.
5. From the list of files on your right, choose custom-js.php
6. Find this section:

   	jQuery(window).scroll(function() {
   	
   	    if(jQuery(this).scrollTop() > 0) {
   	    	jQuery('#header').addClass('movement');
   	    } else {
   	    	jQuery('#header').removeClass('movement');
   	    }
   	    
   	});
   

   and right below that add this:

   
   	jQuery(function() {
   	
   	    if(jQuery(this).scrollTop() > 0) {
   	    	jQuery('#header').addClass('movement');
   	    } else {
   	    	jQuery('#header').removeClass('movement');
   	    }
   	    
   	});
   

7. Save your changes.

That would hide your logo except for when the browser is scrolled all the way to the top. Without the logo the header will be shorter and that should prevent content from being obscured.

If I can help out, let me know.

Thanks,
Bill

[Christopher Simmons]

Thanks Bill!

I’m going to try this, but wanted to ask about an alternate approach, based on your answer.

Is it possible to use that same scrolling javascript to SUBTRACT a specified number of pixels rather than add them? If so, I could add a margin or padding to all pages so the elements are positioned right, but subtract the additional padding when navigating within the home page so we don’t get extra huge margins at the top.

Maybe that’s a dumb idea, but figured I’d run it past you.

Thanks for the incredibly swift response. The site launches tomorrow (hopefully). I think you’ll like what we’ve done with the theme!

[Bill Robbins]

Christopher,

You can do that if you’d like to. In the custom-js.php file I mentioned before, here’s the section with the scrolling effect/position:

// Smooth Scrolling 
	jQuery(function($) {
	  $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('html,body').animate({
	          scrollTop: target.offset().top - 100
	        }, 1000);
	        return false;
	      }
	    }
	  });
	});

It’s the top - 100 above that sets the distance from the top edge. That sets it to scroll to the top minus 100 pixels. Feel free to play around with that along with padding values to find a good fit. I imagine there is one that will give you a sweet spot.

Let me know if you have any trouble.

Bill

[Christopher Simmons]

Awesome. Thanks so much for your help. It’s all sorted now!

[Bill Robbins]

Fantastic Christopher. If you need anything else, just let me know.

[Author]

Posts