in page anchors not working

6 replies · opened Feb 4, 2023

AartiechangFeb 4, 2023

In my primary nav menu, I have some in-page anchor links (i.e. /solutions/business-communications-solutions.php#solution-by-industry) but when I click on the menu item instead of going to that anchor place on the page, it goes to the top of the page. If you go to the main website, under the solutions main nav item, there are three solution sub sections (by size, by function, by industry/sector). Those sub nav headings point to different in page anchors which should go to specific parts of a common webpage but they all end up going to the top of that webpage instead of the anchor point within that webpage.

SSemicolon WebSTAFFFeb 6, 2023

Hello,

Simply find and delete the following lines of code from the js/functions.js File:
[ch_pre type="js"]$body.off( 'click' ).on( 'click', 'a[href*="#"]', function() {
$window.on('beforeunload', function() {
$window.scrollTop(0);
});
});[/ch_pre]

This will definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AartiechangFeb 6, 2023

I commented out that javascript but it still doesn't work. Now it goes to the in page anchor for about half a second and then scrolls back to the top of the page.

AartiechangFeb 6, 2023

I commented out that javascript but it still doesn’t work. Now it goes to the in page anchor for about half a second and then scrolls back to the top of the page.

There is another function in function.js:
let linkElement = location.hash;
if( $(linkElement).length > 0 && $('.one-page-menu').find('[data-href="'+linkElement+'"]').length > 0 ) {
$window.scrollTop(0);
}

Do I need to comment out this one too?

AartiechangFeb 7, 2023

I have noticed that the in page anchor works if you are on the same webpage but not if a link is referencing an anchor on another webpage. It fails on any "other webpage" anchor link. It goes to the anchor point but then immediately goes to the top of the webpage. There is another javacsript somewhere in the code that is scrolling to the top of the webpage after loading. Please help!

AartiechangFeb 7, 2023

I sent this in before and you suggested I comment out this javascript:
$body.off( 'click' ).on( 'click', 'a[href*="#"]', function() {
$window.on('beforeunload', function() {
$window.scrollTop(0);
});
});
Which I did, but it STILL doesn't work. If you click on a webpage that has an in page anchor (#anchorname), the webpage loads and briefly goes to the anchor point and then immediately scrolls back to the top of the page. This happens for any in page anchor on another webpage. If the anchor is on the same page it works fine. There is some other javascript that is forcing the webpage to top. Please help! I need in page anchors to work properly.

SSemicolon WebSTAFFFeb 8, 2023

Hello,

Thanks for your Kind Patience and more details on this issue. We have looked into this further and based on your issue please consider deleting the entire block as mentioned below from the js/functions.js File:
[ch_pre type="js"]$body.off( 'click' ).on( 'click', 'a[href*="#"]', function() {
$window.on('beforeunload', function() {
$window.scrollTop(0);
});
});

let linkElement = location.hash;
if( $(linkElement).length > 0 && $('.one-page-menu').find('[data-href="'+linkElement+'"]').length > 0 ) {
$window.scrollTop(0);
}[/ch_pre]

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard