Text anchor links being overriden by page/section data-url-id link

Site URL: https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro/

I am attempting to add some text anchor links (a pseudo menu) at the top of this page:

https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro/

Template is Marquee v7.0

Just below the video header, you'll see an attempt at a text menu:   "What's On"   "Eat"   "Functions"  "Members"  "Contact us"

Members and Contact us are working just fine but I am trying to link   What's On   Eat   Functions  to their respective areas just down the page a bit

I have added a code block at each of the areas to be linked and attempted a variety of anchors/links but NONE are working correctly.  EVERY attempt ends up back at the actual top page section data-url-id="kingscliff-surf-club" and the url https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro/#kingscliff-surf-club

In the code block, I have tried many obvious combinations.  Examples; 

<div id="whats-on"></div>
<div data-url-id="whats-on" id="whats-on"></div>
<div data-url-id="whats-on"></div>

I have also tried a variety of url links to those ID's with; #whats-on, full path, trailing slash, no trailing slash, etc

Nothing works.  Everything ends up back at #kingscliff-surf-club

Odd thing is, I can use those new text links to successfully link to the actual Member page section further down at https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro#membership-open

The Member section however is an actual Squarespace created data-url-id section whereas the other links I'm trying to connect to, I'm adding myself and are all contained within the #kingscliff-surf-club section of the page.

Source code suggests it should be working OK?  Any suggestions on why it's not working would be appreciated.  Thanks in advance.

Add a Code Block with this code

<span id="what-on"></span>

Next, edit What's On Text link >> enter this text url

#what-on

Thanks Tuanphan, your assistance is much appreciated but unfortunately - exactly the same behaviour as everything else I've tried.

url looks fine on mouseover - correct <span> anchor and corresponding link is clearly there.  However, click on the text link and it momentarily scrolls to the correct <span> location on the page but then immediately reverts back to the top of the page and the #kingscliff-surf-club url?

I've left your <span> id and text link on the page to show you exactly what I mean.

Here: https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro#whats-on

I've tried every type of id anchor and an assortment of url links but nothing works.  Always exactly the same behaviour - end up at top of page and url #kingscliff-surf-club.  I even tried some javascript and jquery to disable the #kingscliff-surf-club anchor but I still couldn't get it to work?

It would appear as though it is something to do with the structure of the template?  That main page is an Index page.  Within that page are three individual pages, the first having the unique url slug of /kingscliff-surf-club.  The moment you start to scroll from the top of the Index, the page url changes to https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro/#kingscliff-surf-club, even when that url hasn't been clicked/entered. 

It would appear that you cannot (successfully) add an anchor link within any of the individual page content in an Index???  Would that be correct?

Thanks and any further ideas greatly appreciated.

Further to my above attempts - I also tried a button link in the Index banner linked to the <span id="whats-on"></span> anchor to see what might happen.   Exactly the same result - back to top and #kingscliff-surf-club url??

Kept working on itand manged to solve it - sort of. 

To successfully anchor link to content within a page that is within an Index, it appears as though you need to use the shortened "tld/page#id" url, rather than the "tld/Index/page#id" url or tld/Index#id.

In other words:  

https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro/kingscliff-surf-club#whats-on - does not work
/index/page#id

https://www.cudgenslsc.org.au/kingscliff-slsc-bar-bistro#whats-on - does not work
/index#id

But https://www.cudgenslsc.org.au/kingscliff-surf-club#whats-on - does work
/page#id

The only problem of course is - that it takes you OFF the Index page and onto the standalone content page, which is far from ideal.  That's not what an Index is designed to do? 

At least anchor links are now working, albeit not how I would like them to work (staying on the Index page)