HTML跳转页面指定位置的几种方法

由于页面显示的信息总是有限的，因此我们需要得以跳转到页面指定位置的实现

纯html实现
1. 跳转时机：<a href="#anchorName">点击跳转到name为anchorName的位置</a>
2. 埋锚点：<a name="anchorName">a标签的锚点</a>，<p id="anchorName">以id为标记的锚点</p>
3. 分析：当点击a标签就会跳到锚点处，没有缓冲效果，体验一般，而且url里会添加"#anchorName"。这在SPA应用里是不可接收的，因为这影响了路由配置。刷新页面无效。
JavaScript辅助（window.scrollTo方法）
1. window.scrollTo({ top,left ,behavior}),分别为数字、数字、字符串。指定跳转到距离文档顶部、左边的距离，以及跳转效果（smooth、instant）
2. 跳转时机：添加事件监听
3. 获取元素到文档顶部的距离（offsetTop属性）,offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离，因此我们要通过循环的方式累加来拿到距离文档最顶部的距离

function heightToTop(ele){//ele为指定跳转到该位置的DOM节点let bridge = ele;let root = document.body;let height = 0;do{height += bridge.offsetTop;bridge = bridge.offsetParent;}while(bridge !== root)return height;
}
//按钮点击时
someBtn.addEventListener('click',function(){window.scrollTo({top:heightToTop(targetEle),behavior:'smooth'})
})

两行方法比较起来，明显第二种更好点.

HTML跳转页面指定位置的几种方法相关推荐

html button跳转页面_HTML跳转到页面指定位置的几种方法
前言有时候,我们想阅读页面中某段精彩的内容,但由于页面太长,用户需要自己滚动页面,查找起来非常麻烦 ,很容易让人失去继续往下阅读的兴趣.这样体验非常不好,所以我们可以想办法实现点击某段文字或者图片 ...
html中的坐标从哪里开始,HTML+CSS入门页面内跳转到相应位置的3种方法
本篇教程介绍了HTML+CSS入门页面内跳转到相应位置的3种方法,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 首先设置所需的css和html 设置css .demo{ ...
js 跳转页面并刷新的几种方法
一:跳转页面并刷新的几种方法: <a href="javascript:history.go(-1)">返回上一页</a> <a href ...
Vim跳转到指定行的三种方法
vim中有3中方法可以跳转到指定行(首先按esc进入命令行模式): 1.ngg/nG (跳转到文件第n行,无需回车) 2.:n (跳转到文件第n行,需要回车) 3.vim +n filename (在 ...
html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
Vue 页面跳转到指定位置
Vue 页面跳转到指定位置页面跳转页面 script style 进阶版:随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转页面 <template><div ...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
锚点定位跳转到指定位置回到顶部功能
一.跳转到指定位置项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息数据 arrayList:[{ //不一一列出 ...
recycleview 使用详解，添加头部尾部，混合item，侧滑菜单，跳转到指定位置，实现九宫格布局
添加头部尾部,混合item:https://blog.csdn.net/meixi_android/article/details/82256319 侧滑菜单:https://blog.csdn.ne ...
RecyclerView跳转到指定位置，RecyclerView上下滑动监听，RecyclerView滑动速度
1.RecyclerView跳转到指定位置只需调用recycleview的置顶方法: recyclerView.scrollToPosition(15); 如果你需要让第15item在屏幕居中,只需 ...

HTML跳转页面指定位置的几种方法

由于页面显示的信息总是有限的，因此我们需要得以跳转到页面指定位置的实现

两行方法比较起来，明显第二种更好点.

HTML跳转页面指定位置的几种方法相关推荐

最新文章

热门文章