0

I've got a Wordpress site with a banner across the top that is 100 px tall. I'm trying to construct a page that instructs people how to check their spam folders for each major email service. I'm using the "Gutenberg" editor.

When I jump to an anchor (Gmail for example), it goes to a spot that cuts off the top 100 px of the section being jumped to because of the banner at the top of my page. I'd like to jump to the anchor and then scroll an additional 100 px down so that it looks like it's scrolling to the beginning of the appropriate section.

I don't need any kind of scrolling effect or anything like that, I just need it to go to the spot on the page where top of the section isn't cut off by the banner.

This is the code I'm using in Custom HTML blocks on my Wordpress page:

Block 1:

<p><a href="#Gmail">Gmail</a></p>

Block 2: 

<p style = "position:relative;"> 
<a id="Gmail" style="position:absolute; top:-100px;"></a> Gmail may filter your emails into one of several places including the Spam mail folder. Click on the Spam folder to check inside for the missing email.
</p>

I got this code from this page.

When I click the jump link, it goes to the anchor, but it still hides the top 100 px of the linked section underneath the top banner.

What do I need to do to make this work? I'm very new to HTML and CSS, so please don't assume I know anything besides the extreme basics.

Thanks in advance!

Poe
  • 1
  • 2

1 Answers1

0

You can use this script for a scroll.

$(document).ready(function(){
$( "a.scrollLink" ).click(function( event ) {
    event.preventDefault();
    $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
});});
Harsh Khare
  • 507
  • 1
  • 3
  • 13