滚动到带有固定标题的锚点,内容隐藏在标题后面,边距和顶部填充不起作用
我正在使用 smoothscroll.js 来导航我的网站。在 Firefox 中,它会停在正确的锚点上,但在 Chrome 中,它会在第一次单击链接时传递该点,并将内容推送到顶部,将内容隐藏在页面后面。然后,如果您再次单击它,它就会正确对齐。我也在其他网站上看到过这些问题。很想看看其他人是否也有同样的问题。 Chrome 似乎忽略任何顶部填充或边距或定位(例如:top:20%;)。
I'm using smoothscroll.js to navigate my site. It stops on the correct anchor in Firefox, however in Chrome it passes the point on the first click of the link, and pushes the content to the top, hiding the content behind the page. then if you click it again, it aligns correctly. I've seen the problems on other sites as well. Curious to see if others have the same problem. Chrome seems to ignore any top padding or margin or positioning (example: top:20%;).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我发现这个解决方案非常简单且有用。您只需要添加 1 行 CSS 即可。
原始答案:https://stackoverflow.com/a/56467997
I find this solution very easy and useful. You just need to add 1 line of CSS.
original answer: https://stackoverflow.com/a/56467997
我使用 本地滚动 (JQuery) 来执行此操作。
它允许您进行顶部偏移
I used Local Scroll (JQuery) to do this.
It allows you to do a top offset
这可能是由于新的 WordPress 主题使用了 header html5 元素。我将标题更改为 div,效果很好。
This may be due to a new wordpress theme using the header html5 element. I changed my header to a div, and it worked fine.