WordPress自定义HTML-跳到锚点然后滚动

Question

我有一个WordPress网站，顶部有一个高度为100 px的横幅。我正在尝试构建一个页面，该页面指示人们如何查看每个主要电子邮件服务的垃圾邮件文件夹。我正在使用" Gutenberg"编辑。

当我跳到锚点（例如Gmail）时，它到达了一个位置，该位置将由于我的页面顶部的横幅而切断了该部分的前100个PX。我想跳到锚点，然后向下滚动100个PX，以使其看起来像是在滚动到适当部分的开始。

我不需要任何类型的滚动效果或类似的效果，我只需要它到横幅上没有切断部分的页面上的位置。

这是我在WordPress页面上自定义HTML块中使用的代码：

块1：

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

块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>

我从此页面获得了此代码。

当我单击跳跃链接时，它将转到锚点，但它仍然隐藏了顶部横幅下方的链接部分的前100个PX。

我需要做什么才能完成这项工作？我是HTML和CSS的新手，所以请不要假设除了极端基础之外，我还不了解。

预先感谢！

Answer 1

您可以将此脚本用于滚动。

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