全部
技术
PHP
MySQL
前端
Linux
JAVA
工具
纪念日计算器
邮记星
个人记账
笔记侠
历史上的今天
生日密码
生日书
生日密码
生日花语
博古通今
三十六计
鬼谷子
笑林广记
本草纲目
山海经
唐诗宋词
宋词300首
唐诗300首
退出
登录
注册
编辑文章
选择分类
PHP
MySQL
前端
Linux
Java
工具
选择专栏
设计模式
java基础
Angular学习
Java面试题
描述:
scrollTo、scrollIntoView、document.documentElement.scrollTop
封面图上传 :
+
点击上传图片
最近在优化自己的网站,需要对吧网站上一些标题啥的可以直接快速跳过去,于是就研究了一下js的scrollTo相关函数,具体如下: #### 一、直接通过scrollIntoView跳转到对应的元素位置 这个存在一个问题,比如我有固定的导航栏,同时用的是**position: fixed**来定位,使用这个方法就存在问题,可能div被遮挡。于是就可以考虑**window.scrollTo** ```js document.getElementById('scroll').scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' }) ``` #### 二、通过window.scrollTo跳转到对应的元素位置,支持设置偏移量 这个方法避免**scrollIntoView**导致的遮挡,但是存在一个很严重的问题,如果你目前整个页面是在最顶部,没有向下滑动,那么没有问题,这个方法OK。如果你手动向下滚动了,那么对不起,它定位开始不准了,就很尴尬。 ```js var element = document.getElementById(anchorId); var headerOffset = 70;//顶部需要空70px,即我的导航栏高度 var elementPosition = element.getBoundingClientRect().top; console.log(element.getBoundingClientRect().top) var offsetPosition = elementPosition - headerOffset; window.scrollTo({ top: offsetPosition, behavior: "smooth" }); ``` #### 三、通过document.documentElement.scrollTop跳转到对应的元素位置,支持设置偏移量,同时避免了window.scrollTo导致的定位不准的问题 这个方法是找了很多帖子,有人遇到同样的问题,有大佬解决了。 原贴地址:[ Javascript scrollintoview smooth scroll and offset](https://www.e-learn.cn/topic/2371753) ```js var element = document.getElementById(anchorId); var headerOffset = 70; ar elementPosition = element.offsetTop; var offsetPosition = elementPosition - headerOffset; document.documentElement.scrollTop = offsetPosition; document.body.scrollTop = offsetPosition; // For Safari ```
保存文章