One-Page: Anchor scrolls to wrong position

Hey guys,

I´m using the storefront-template for a site with One-Page-Layout. Unfortunately the anchors of the main menue scroll to the wrong position. The titles of the anchored modules get lost behind the fixed menue.

How can I change that?

Thank you!

Could you please post an url to your site?

Here it is:

http://www.meissner-communications.com/

Your site is password protected.
Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

Hi,

I´ve sent you the private message with the login. Could you please help me?
Thank you.

Please edit this file:
templates/gk_storefront/js/gk.scripts.js
and find this section:

Code: Select all

                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {


and offset the scroll value with your header height:

Code: Select all

                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top-133
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {


Thank you. But the problem is still there. Now it scrolls to the right postion, but it flips back up again after a second..

I have checked your site and it seems to be working fine. Could you please post some info about os and browser (with version)?

Ok, here you are.
OS: Windows 7
Browser: Mozilla Firefox 41.0.2

I have checked your site with Windows 7 and Firefox 42.0 and I doesn't see any such behave.

I´ve checked the issue again with Windows 7 an IE 11 and with Windows 7 an Firefox 42.0. But the problem is still there. If you click on "Profil", "Werte", "Beratung" in the menu, the page scrolls to the right anchor-position at first, so that you can read the title of the module like "Profil", "Werte" etc. But just after a second the page flips up a little bit, so that the title of the module hides behind the menu again. It must have something to do with the animation-effect, but I can´t find the solution.

Could you please try again and help me?
Thank you very much!

Please verify if same problem happens on Chrome

Seems like a really strange bug, I'll report that to our devteam and let you know when I get an answer.

Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. ftp data (host, user, password)
4. link to this thread

You´ve got the message.

It took me some time to check this out, but it seems I have found a solution...
Replacing this code:

Code: Select all

                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top-133
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {


with:

Code: Select all

                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top-133
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            document.location.hash = target.selector;
                        }
                    });
                } else {


seems to do the trick.

Ok, sorry, it doesn't :/ Let me try other solutions.

Ok, this code:

Code: Select all

                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 {


seems to fix the issue, but it is nasty workaround and it would be better to add margins around tagged elements. Please make some testing and if it works you can leave it as it is.

Hi,

thank you very much. That works fine for most of the site. Iam ealy happy with that. But there is a little Problem left.

I.E: If you come from „Kontakt“ in the top nav menue and click on "Profil" in the main menue, the page still jumps to the wrong position. The headline is hidden behind the mainmenu again. Can you try to fix that, too?

Thank you.

It cannot be changed - this is the consequence of sticky menu always visible and browser scrolling to selected anchor tag. Here, the only way would be to add paddings:

Code: Select all

#gkTop1, #gkTop2, #gkTop3, #gkTop4, #gkTop5 {
    padding: 129px 0 30px;
}