Scroll to anchor with offset when coming from another page

Support
#1

Hi, I have a “nearly”-Onepage-Layout. I link to my content using anchors. Since I have a fixed header, I need to offset scrolling by 125 pixels.

That works fine for links on the same page using this jquery:

jQuery(function($) {
  $('a[href*="#"]:not([href="#"])').click(function(e) {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
	
    
      var target = $(this.hash);
    
      headerHeight = 120;
      
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      
      if (target.length) {
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }, 'linear');
        
      }
    }
  });
});

Unfortunately I have on other page (the disclaimer). When I link to the disclaimer, it’s no problem, but when I link back to an anchor on the main page, the anchor is hidden behind the menu bar.

How can I get it to scroll the additional 125 pixels?

#2

Hi there,

Thanks for writing in.

That code is for links that directly clicked but not for the page that is loaded. You’ll need to add another set of code like this

jQuery ( document ).ready ( function($) {

var hash= window.location.hash

if ( hash == '' || hash == '#' || hash == undefined ) return false;

	    
      var target = $(hash);
    
      headerHeight = 120;
      
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      
      if (target.length) {
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }, 'linear');
        
      }

} );

Though, that’s just the idea and we can’t provide further customization. You may enhance it as well.

Thanks!

#3

These two bits of javascript combined worked for me without modification. Thanks.

#4

You’re welcome! :slight_smile:

#5

After some cleaning up I ended up with this:

jQuery(function($) {
  $('a[href*="#"]:not([href="#"])').click(function() {
      var target = $(this.hash);
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 120
        }, 'linear');   
  });    
	if (location.hash){
    var id = $(location.hash);
	}
	$(window).load(function() {
  	if (location.hash){
    	$('html,body').animate({scrollTop: id.offset().top -120}, 'linear')
  	};
 	});
})(jQuery);
#6

Glad you’ve sorted it out and thank you for sharing with us!

#7

I have a follow-up question.

The anchor links within a page are working perfectly for me and are offset, so there are no problems there. However, links from the outside which go directly to the anchors somehow prevent The Grid from loading. I have four different instances of The Grid on that page, and I’d like to be able to link to any of the anchors freely.

For example, this link works perfectly:

But with an anchor the same link leaves The Grid spinning infinitely. The anchor links still work.

Why would this happen?

#8

HI again,

Can you please replace your code with this:

jQuery ( document ).ready ( function($) {
var hash= window.location.hash
if ( hash == '' || hash == '#' || hash == undefined ) return false;
      var target = $(hash);
      headerHeight = 120;
      target = target.length ? target : $('[name=' + hash.slice(1) +']');
      if (target.length) {
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }, 'linear');
      }
} );

Let us know how this goes!

#9

Thanks. For anybody else reading, this bit of javascript from Nabeel plus the original script from StefanStrassburger work well and allow outside links to the anchors including the vertical offset. Page anchors work, and they leave room for the fixed header.

Unfortunately in my case I’m using The Grid to make sizable chunks of content. The heights are not known for several seconds, and the page position ends up being incorrect because the content jumps after it appears. Even using <script defer src="..."> didn’t help it to work for my situation, because the whole page is created dynnamically by The Grid’s mosaic layout. I will need to keep the internal links but omit outside references to avoid that problem.

Thank you anyway for the help. It was worth a try.

#10

You’re most welcome! I’m not sure about the conflict, but yes, without dimension upon load will cause issue rendering issues.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.