anchor scrolling when anchor directs to different page

The default anchor scrolling in Storefront doesn't work well. It doesn't redirect to another page at all, and it doesnt offset.

Using helps from this forum I solved redirecting to anchor on different page and smooth scrolling with offsetting the top menu on the same page.

However, the redirecting to anchor on another page doesn't offset. The site user lands 130 pixels under the anchor in the Storefront template if the anchor is on another page.

I use this js obtained here: https://www.gavick.com/forums/storefron ... tion-48636

Code: Select all

      // smooth anchor scrolling
      jQuery('a[href*="#"]').on('click', function (e) {
         e.preventDefault();
         if(this.hash !== '') {
            var target = jQuery(this.hash);
                if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {   
               if(target.length && this.hash !== '#') {
                  jQuery('html, body').stop().animate({
                     'scrollTop': target.offset().top-133
                  }, 1000, 'swing', function () {
                     if(this.hash !== '#') {
                        history.pushState({}, '', target.selector);
                     }
                  });
               } else if(this.hash !== '' && this.href.replace(this.hash, '') !== '') {
                  window.location.href = this.href;
                         }
            } else if(this.hash !== '' && this.href.replace(this.hash, '') !== '') {
               window.location.href = this.href;
                     }
              }
          });
   }

Any help appreciated.

Hi

Please tell me the url to Your site and url to example of this anchor position showing 130px under.

I sent a PV

Hi

I got Your PM. For start anchor should have # sign before it, which means it can only use id="" as an anchor. Additionally it works ok since anchor starts at the very top of the screen. Problem is with header which is fixed on top and visible over it. The only idea I have is to add a 100px padding at top of every anchor layer used as anchor. Here is an example code:

Code: Select all

#gkMainbody {
    padding-top: 100px;
}


Yes, thats how the template is designed, with 100px fixed header menu. Therefore I thought that the used js would deal with that.

I can´t give the element 100px padding to counter that for the anchor functionality as that would leave the page with 100px blank space that I have no use for.

Hi

I'm sorry, but I do not know how to solve it in other way. Maybe disabling fixed header by adding this code to override.css ?

Code: Select all

#gkHeaderTop, #gkHeaderNav {
    position: relative;
    top: 0;
}

#gkHeader {
    padding: 0;
}