当前位置: 首页 > news >正文

html页面跳转或者a标签锚点跳转,解决页面滚动问题3个(1.从底部开始滚动,2.滚动不到指定锚点位置,3.页面展示不在最上面)

1.当页面滑动了一些之后跳转新页面或者刷新当前页面,页面展示就不会在顶部

2.当页面滑动了一些之后带锚点跳转新页面,就可能会出现从下面向上面滚动到指定锚点的情况(滑动距离高于锚点距离的时候)

3.当页面的头部设置了固定到顶部,没有滑动页面头部高度是200,滑动了之后头部只保留一部分固定高度变成了100就可能会出现锚点跳转不到指定位置的情况

三个问题都使用统一的解决方法,亲测有效

(function(){// 页面滚动,先返回顶部在根据是否有锚点进行跳转window.scrollTo(0, 0);const hash = window.location.hash;// 如果页面有锚点跳转就执行锚点滚动if (hash) {const el = document.querySelector(hash);setTimeout(() => {el && el.scrollIntoView({ behavior: "smooth", block: "start" });}, 10);}
})
http://www.dtcms.com/a/306997.html

相关文章:

  • MySQL图解索引篇(2)
  • 斯皮尔曼spearman相关系数
  • 25年新算法!基于猛禽的优化算法(BPBO):一种元启发式优化算法,附完整免费MATLAB代码
  • Java反射-动态代理
  • cmake_parse_arguments()构建清晰灵活的 CMake 函数接口
  • 智汇AI,应用领航 | 华宇万象问数入选2025全景赋能典型案例
  • 36、spark-measure 源码修改用于数据质量监控
  • Linux零基础Shell教学全集(可用于日常查询语句,目录清晰,内容详细)(自学尚硅谷B站shell课程后的万字学习笔记,附课程链接)
  • 「Spring Boot + MyBatis-Plus + MySQL 一主两从」读写分离实战教程
  • Linux 中,命令查看系统版本和内核信息
  • Linux 系统原理深度剖析与技术实践:从内核架构到前沿应用
  • 【选型】HK32L088 与 STM32F0/L0 系列 MCU 参数对比与选型建议(ST 原厂 vs 国产芯片)(单片机选型主要考虑的参数与因素)
  • 【python】列表“*”方式与推导式方式初始化区别
  • 数据结构——单链表1
  • 【WRF-Chem】EDGAR 排放数据处理:分部门合并转化为二进制(Python全代码)
  • RAG实战指南 Day 27:端到端评估框架实现
  • CSS-in-JS 动态主题切换与首屏渲染优化
  • 1.5.Vue v-for 和 指令修饰符
  • COZE 开源,新一代 AI Agent 本地部署一条龙
  • Excel文件解析
  • OpenWrt Network configuration
  • 百度统计在哪里添加网站?
  • Linux系统启动不受未挂载硬盘影响的解决方案
  • Windows系统使用命令生成文件夹下项目目录树(文件结构树)的两种高效方法
  • 深度学习-丢弃法 Dropout
  • C语言基础11——结构体1
  • Qt Quick 动画与过渡效果
  • QT中QTableView+Model+Delegate实现一个demo
  • TikTok 视频审核模型:用逻辑回归找出特殊类型的视频
  • 全栈:SSH和SSM和Springboot mybatisplus有什么区别?