单击超链接后更改屏幕位置[重复]

Posted 2023-02-22

【中文标题】单击超链接后更改屏幕位置[重复]

【英文标题】：Change on screen location after hyperlink is clicked [duplicate]

【发布时间】：2020-03-23 13:40:42

【问题描述】：

我正在开发一个带有导航栏的单页网站。单击导航图标时，视图会适当地转到目标位置。但是，导航栏覆盖了所需部分的一部分。所以目标是改变超链接的目标位置。例如，可能要对其进行更改，使其始终比平时高 20 像素。有没有办法改变<a> 标签将带你的位置？

编辑：我最近在别处找到了我的问题的答案。我将把它标记为重复。我想我以前没有找到它，因为我不知道该用什么词来描述我的问题。

【问题讨论】：

rapidtables.com/web/html/link/html-anchor-link.html Anchor 就是你要找的。​​span>

@dnunez32 感谢您的快速响应 :) 但是，由于我使用的是锚标签，所以我不太明白这如何回答我的问题，但问题是目标位置正在被剪切关闭，我正在寻找如何更改结果视图。除非您在我编辑“”标签之前输入了答案。

不应该用css解决吗？

@JonB 那太好了。你知道怎么做吗？我不想实际为元素添加边距，因为这会改变页面本身的外观，但如果有 css 解决方案，我很想听听。我知道这将如何工作

@dnunez32 你是对的，锚标签用于我在这里找到的解决方案***.com/questions/10732690/…。我想只使用链接的锚标签，但不知道你可以将它们用作目标。谢谢。

【参考方案1】：

您可以使用 jQuery 来做到这一点并进行平滑滚动。

$('a[href*="#"]').click(function()
 $('html, body').animate(
    scrollTop: $( $(this).attr('href') ).offset().top - 20
 , 500);
return false;

);

【讨论】：

谢谢！没有jQuery可以做到这一点吗？我只是为这个网站做贡献，除非绝对必要，否则我不希望他们下载 jQuery。

您也可以使用纯 javascript，但这需要更多的工作。 jQuery 总是一个很棒的库 :)) 你可以用它做一些很棒的事情。

当然，您知道我应该为 javascript 解决方案使用哪些函数吗？您不必输入解决方案，因为我想如果我知道这个概念，我可以在网上找到它。我同意，jQuery 很棒 :) 我想我正在尝试最小化我添加到项目中的内容，但也许我会把它带给他们

对不起，我好像没有沟通清楚。我要求在 javascript 中使用偏移值移动页面视图的函数（除非我没有彻底阅读您的链接）。谢谢你的资源！

我不确定是否有特定的功能，但是您可以考虑在单击导航图标时页面将跳转到的部分中添加padding-top:20px。