css - Wordpress 自定义 Html - 跳转到锚点然后滚动

Question

我有一个 Wordpress 网站，顶部有一个 100 像素高的横幅。我正在尝试构建一个页面，指导人们如何检查每个主要电子邮件服务的垃圾邮件文件夹。我正在使用“古腾堡”编辑器。

当我跳转到一个锚点（例如 Gmail）时，它会转到一个位置，因为我页面顶部的横幅，它会切断被跳转到的部分的前 100 像素。我想跳到锚点，然后再向下滚动 100 像素，这样看起来它正在滚动到相应部分的开头。

我不需要任何类型的滚动效果或类似的东西，我只需要它转到页面上部分顶部未被横幅切断的位置。

这是我在 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 像素。

我需要做什么才能完成这项工作？我对 HTML 和 CSS 很陌生，所以请不要假设我除了极端基础知识之外什么都知道。

提前致谢！

标签： csswordpresshtmlwordpress-gutenberg

Answer 1

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

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