fixed-top下scrollIntoView()的问题

Diza1986 2019-08-07 09:47:00

画面上通过Element.scrollIntoView()实现了一个自动滚动的链接，使目标DOM滚动到页面最上端，
但是，页面的头部是fixed-top固定显示的，导致的现象是目标DOM被fixed-top的头部遮盖。

希望达到的效果是目标DOM滚动到fixed-top头部的下方，怎样解决呢？

现在能想到的方法是在目标DOM的上方合适位置设置锚点A，A.scrollIntoView()使A置顶，目标DOM到合适的位置。
觉得有点low啊。。。

求教了！

...全文

946 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_41854113 2020-03-22

打赏
举报

回复

请问这问题解决了吗

Diza1986 2019-08-09

打赏
举报

回复

引用 2 楼潇湘忆梦的回复:

你的方法是可行的，并不是low啊，就在页面的头部下面设置锚点，放置目标DOM就行

这个方法是可以，只是不利于维护，受制于真假锚点的相对位置。用了另外一种方式，固定头部的下面（除去固定头部）加一个div，让这个div显示滚动条，再link锚点时，目标DOM会滚动到div容器的顶端位置正确。

潇湘忆梦 2019-08-07

打赏
举报

回复

你的方法是可行的，并不是low啊，就在页面的头部下面设置锚点，放置目标DOM就行

Diza1986 2019-08-07

打赏
举报

回复

冷冷清清

position: fixed; bottom: 20px; /* 距离底部的距离 */ right: 30px; /* 距离右侧的距离 */ z-index: 9999; /* 确保在所有元素之上 */ background-color: #333; /* 背景颜色 */ color: #fff; /* 文字颜色 */ ...

document.getElementById('topH1').scrollIntoView({ behavior: 'smooth', block: 'start' }); }; ``` **优点：** - 支持平滑滚动，用户体验更好。 - 相对简单且易于理解。 **缺点：** - 兼容性不如传统方法，...

这可以通过计算字母在联系人列表中的位置，并使用`scrollIntoView()`方法实现。最后，根据实际需求，可能需要对代码进行优化，比如响应式设计，确保在不同设备上都能正常显示和操作。如果使用了React或其他前端...

最后，为了实现更流畅的滚动动画，可以使用`$.fn.scrollIntoView()`方法，或者自定义平滑滚动函数，但这超出了本篇文章的范围。总结起来，创建一个jQuery左侧悬浮导航预览代码涉及到HTML结构设计、CSS布局设置和...

使用CSS的scroll-margin-top属性，在元素滚动到达时添加一个额外的距离，以避免滚动到头部fixed布局之下。

39,118

社区成员

5,567

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章