Anchor links to new page is dropping far below the anchor tag.

[ResortsandLodges]

#515962

I have added several anchor links on my client’s new website and the links open a new page, but the page is going further down than the page anchors and the sticky header. There are several links on the Accommodations page.

Here is an example link: http://barefootres.staging.wpengine.com/accommodations/summit-view-building/#threebed

[Dewdan]

#558672

I am having the same problem, links going further down the page instead of the anchor.
Any solution for this?

[dualsun]

#561765

Yep, same problem.. the anchor link rapidly jumps to the middle of the container.
if there is any smooth scrolling, please let us know.

[Sky-Life]

#562459

I´m having the same issue on a clients site.

[c152slo]

#564682

Same problem. I opened support ticket for this.
There should be some kind of “offset” settings.

[mightymouse3062]

#565414

I am hitting the same problem where the anchor link is scrolling the page about ~175px further than it should. Since this topic seems to have been here for a while, does anyone have a fix for the problem?

[acmel]

#569548

lol. Everybody is having the same problem including me and there is not solution posted. I just submitted a ticket so I hope I can get an useful answer.

[Michael C]

#569582

Hi guys,

The easiest way to tell if this is working is by checking how the transition appears. If you jump down to an area of the page with no transition, then it means the link is not using the scroll method. In which case see the details below:

If you are linking to an anchor on another page, you should use the One Page Text Link element. In a text block click on the Fusion Element Generator icon (top row, about three icons from the right) and you’ll find it in there. If the link is in the main menu it will work automatically.

Alternatively:
If you just have HTML and no capability to add a shortcode then you can use CSS classes to trigger this.
If you have an anchor tag, you can add the class – fusion-one-page-text-link
If you can only edit the anchor parent but not the anchor itself, then adding the class fusion-menu to the parent should work.

If you are pasting a link to another website, then you should include an underscore after the hash. For example, the initial URL posted here should be http://barefootres.staging.wpengine.com/accommodations/summit-view-building/#_threebed

[c152slo]

#569594

Hi guys

Sorry, I forgot to post what support said.

In the element where are you calling anchor links, you should add class “fusion-menu”. Than it works. To not ask me why and where is this documented, because I did not find it.

Try and let me know.

[acmel]

#569815

So, I am bringing good news:

My error was that I was using “Person” from the fusion elements and they recommend to use “Image” as image or for linking purposes. Additional to this, as it was said by C152slo, the class “fusion-menu” should be used in the anchor.

Good luck!

[mululu]

#572112

Hello,
I have the same problem. Can anyone explain step by step how to solve this?

[garraeth]

#615974

I’m having the same issue…my dev url: http://198.199.98.196/home/tour/#PAGE2 (you can see the link bottom-center of the first “page”).

I’ve tried:
–adding the anchor to the Container under “Container Settings” (link in the Containers blue bar) -> “Name Of Menu Anchor”, changing to “PAGE2” (no quotes and no hash).
–My link is in a Code Block within the top-of-page Container: <a href="#PAGE2" class="icon-scroll-c21 icon-scroll-c21-tour-goto-pg2 fusion-one-page-text-link"></a> (my custom classes simply style/position the link to bottom-center of the first page).

I’ve also tried creating a Code Block within the “PAGE2” container with this code (and removing the “PAGE2” from the top-of-page Container, of course):
<div class="fusion-menu-anchor" id="PAGE2" ></div>

With the Code Block, I can move the anchor around on the page using CSS (absolute, top, etc), but that’s very iffy and does not work as I resize the browser window (the landing place constantly shifts as I size the browser).

Thanks!

[Dewdan]

#616800

OK, Since there doesn’t seem to be any solution with this and the only anchor that seems to work perfectly is the fusion slider, i used that as a base to create my own anchor link that work like a charm. here is how to proceed:
I created my own class .next-page-arrow and wrote the following custom css:

/*::::::::::::::: NEXT PAGE ARROW ::::::::::::::::*/
.next-page-arrow{
     display: inline-block;
    z-index: 10000;
    position: absolute;
    bottom: 25px;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    font-family: icomoon;
    color: #fff;
}
.next-page-arrow:after {
    content: '\e61f';
    color: inherit;
}

After that I added a text block element at the bottom of each one of my containers with the following content:
[fusion_one_page_text_link link="#YOUR-ANCHOR-NAME" class="next-page-arrow" id=""][/fusion_one_page_text_link]
Then I named each container anchor under the General tab/”Name Of Menu Anchor” with it’s own Anchor name et voilá.

Now my links with the Arrow Down icon under each container goes to the next container in a beautiful and smooth way.

Enjoy the ride.
Daniel

[marklchaves]

#667097

Just posted a fairly elegant solution for anchor sections being hidden underneath a fixed header when an anchor link is clicked.

If anyone’s interested.

https://marklchaves.com/jump-for-it/

[TonyPowellBuyrite]

#668178

Hi Guys,

Just to confirm that this does work.

If like me you are using an image to link to an anchor point on another page. Do the following….

1. Within the settings section of the container, of the section of the page you want to anchor to, Within the “Name Of Menu Anchor” field. Enter/type the name of the anchor. For example “anchorpoint1”. No capitals, no hiphens just lowercase.

First part completed!

2. Then within the image settings of the image you want to link from (Possibly on another page). Add the full url within the “link url” field. For example http://www.yourdomain.com/testpage/#anchorpoint1 and then make sure use also fill in the field “CSS Class” and enter just fusion-menu

Update both pages and it should work!

Cheers,
Tony

Also if you want to do a text link then you will still do step 1 from above, but step two you will probably be best to use a code block for your text and use the following for the anchor link

Click Me!

and you can use part of the absolute url. For example ‘www.yourdomain.com/testpage/#anchorpoint1’ or ‘/testpage/#anchorpoint1’ and it should work.

[Author]

Posts