【问题标题】: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 你是对的,锚标签用于我在这里找到的解决方案stackoverflow.com/questions/10732690/…。我想只使用链接的锚标签,但不知道你可以将它们用作目标。谢谢。

标签: javascript html hyperlink


【解决方案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
猜你喜欢
  • 2016-02-24
  • 2012-05-04
  • 1970-01-01
  • 2020-04-03
  • 1970-01-01
  • 2016-01-01
  • 1970-01-01
  • 2012-05-24
  • 1970-01-01
相关资源
最近更新 更多