如何滚动到具有偏移量的锚点？

我了解，你可以很容易地引用它们像这样滚动到锚...如何滚动到具有偏移量的锚点？

<a href = "#div1">Click here to go to div!</a> 
<div id = "div1">Stuff in your div</div>

我有这个问题，因为我有有它的位置设定为固定顶部的音乐播放器，所以当我尝试锚点时，它正在切断我的顶部。

如果您需要示例，请查看我的页面here。点击帖子的图片开始播放歌曲，然后点击“查看帖子”，应该将您带到正确的帖子，但是您可以看到顶部被切断。

有没有一种简单的方法来获得某种类型的胶印或其他东西，所以我可以解决这个问题。此外，我可以做到这一点，所以它不会改变网站的URL，以最终有/＃这里？

来源

2013-08-03 jas7457

可能的重复[offsetting一个用于调整固定标题的html锚点]（http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header）既然你点击了一个''标签，将会修改网址。这可以通过使用jQuery来滚动来停止。 – abc123

这是可能的用JavaScript，偏移变量必须根据所期望的偏移

的Javascript改变：

function getpos(myElement) 
     { 
      var offset = 20; 
      window.scrollTo(0, 0); 
      var rect = myElement.getBoundingClientRect(); 
      window.scrollTo(rect.left , rect.top - offset); 
     }

HTML：

<div id="yourElementId" onclick="getpos(this);">image or another element</div>

窗口将滚动到点击的元素与ID为'yourElementId'且偏移量为'20'

来源

2013-08-03 01:59:47 nejib

将'getpos（）'函数作为你正在查找的'id'的字符串不是更好吗？ – abc123

是的，我是新来的，我应该改变我的答案吗？ – nejib

我会将它添加到您当前的答案下，作为建议。你的答案解决了他的问题，但是添加上面的内容会使它只有一次定义的功能，所以最好练习。我提出了这个建议，不会因为使其更清楚而拿走它。 – abc123

如何滚动到具有偏移量的锚点？

回答

相关问题