Anchor point position not correct due to sticky menu

[Bramm]

Hi there,

I want to use anchorpoints on this page (still only preview): https://www.abcebusiness.nl/?hs_preview=VaoyXdSv-25819417990

I already managed to add a scroll, but due to the sticky menu the title is covered. What I want to do is to stop the scroll a bit earlier, preferable on top of the column.

The first on (apps) is good. However I added an extra column with the anchor point, which isn't preferable and I hope I can fix this with an edit of the code.

I am currently using this code for the scroll:

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, function () {
window.location.hash = target;
});
});
});
</script>

I am using Hubspot CMS and custom made modules (not made by me).

Thank you very much!

[narmstrong]

Try this.

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var stickymenu = $(sticky-menu-class-or-id).outerHeight();

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top - stickymenu
}, 800, function () {
window.location.hash = target;
});
});
});
</script>

[Bramm]

Thanks for your reply. Unfortunately it doesn't work 😞

Maybe good to add: we are using custom made modules which automatically add a whitespace (standard, little, non, stardard above, standard below, little above, little below). That's also why it goes automatically to the title instead of the top of the column.

[narmstrong]

You can add a class to your anchors and then use some css to make up the diference.

Something like:

<a id="Features" class="the-anchor" data-hs-anchor="true"></a>

Then add some CSS like this:

.the-anchor {
position: relative;
top: -100px;
}

You could probably also edit your JS to something like this:

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash,
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top - 100
}, 800, function () {
window.location.hash = target;
});
});
});
</script>

[Bramm · Accepted solution]

Thanks for your help! I appreciate that 🙂 It works exactly like I hoped it would. Let me tell you what I did:

First I added the JS with "top - 100". Then it did go smoothly to the right position, but just before the end, it jumped at the very end. So I deleted that (otherwise it would be double with the CSS option).

Then I added the CSS and then it did work. So thank you very much Narmstrong! 

So for the others who are reading this. First add this to your CSS:

.the-anchor {
position: relative;
top: -100px;
}

Edit your 'regular' anchor code to this. Otherwise the CSS addition doesn't work:

<a id="insert ID" class="the-anchor" data-hs-anchor="true"></a>