Question

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

当我跳到锚点（例如，Gmail）时，由于页面顶部的横幅，它会切到要跳转到的部分的前100 px处。我想跳到锚点，然后再向下滚动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>

我从page处获得了这段代码。

当我单击跳转链接时，它将转到锚点，但仍将链接部分的前100像素隐藏在顶部横幅下方。

我需要做些什么才能使它起作用？我对HTML和CSS还是很陌生，所以请不要以为我除了极端的基础知识之外什么都不知道。

谢谢！

Answer 1

您可以使用此脚本进行滚动。

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

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

1 个答案: