js回到页面指定位置的三种方式


Posted in Javascript onDecember 17, 2020

以前大部分时间都是在做b端相关的项目,在实现此类需求时,通常都是直接借助 a 标签搞定,现在做c端了,对交互性的要求一下就提升了,此时 a 标签就远远不能满足要求了,需要借助js来实现此类需求,特此记录。

a 标签

首先放出html

<body>
  <contain class="test1">
    <a name="topAnchor"></a>
    <div id="top">我是顶部</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </contain>
  <footer>
    <button id="backTop1">第一种方式回到顶部</button>
    <button id="backTop2">第二种方式回到顶部</button>
    <button id="backTop3">第三种方式回到顶部</button>
  </footer>
</body>

然后具体操作步骤如下

  • 将a标签放到指定元素的附近
  • 然后通过点击事件生成 a 标签
  • 触发a标签事件
  • 删除a标签

代码如下

const backTop1 = document.getElementById("backTop1")

  backTop1.addEventListener("click", function (e) {
    let a = document.createElement("a")
    a.href = "#topAnchor"
    e.target.appendChild(a)
    a.onclick = function (e) {
      e.stopPropagation()
    }
    a.click()
    e.target.removeChild(a)
  })

效果如下图所示

js回到页面指定位置的三种方式

效果很明显,在事件触发之后,页面立马跑到的顶部,在交互性没啥要求的时候,这种做法确实没啥问题,不过要求高了之后就不行了,会显得有些突兀。

经大佬提示,可以在style中设置 html, body { scroll-behavior:smooth; },可以达到和下面两个api的behavior 参数为 smooth 的效果是一样的

scrollTo()

此 api 需要传递 DOM元素相对于window的 left 和 top 的距离,此例子仅展示简单demo,只考虑 top 坐标

当然它还有一个 behavior 参数,将其设置为 smooth 后,将会出现滑动效果 步骤如下:

  • 计算目标元素距离顶部的距离
  • 通过事件触发

代码如下:

const backTop2 = document.getElementById("backTop2")
  const TOP = document.getElementById("top")
  const y = TOP.offsetTop
  const backTop3 = document.getElementById("backTop3")
  backTop3.addEventListener("click", function (e) {
    window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
  })

效果如下图所示

js回到页面指定位置的三种方式

从效果上来看,相较于 a 标签,该api支持动画,使得页面更丝滑 不过它对iframe的支持度不够,在我所遇到的项目中iframe的占比还不小,还请谨慎使用

Element.scrollIntoView()

该 api 相较于上一个,节点信息更加的明确,操作方法也更加的简洁,更利于后续的维护

代码如下

const backTop2 = document.getElementById("backTop2")
  const TOP = document.getElementById("top")
  backTop2.addEventListener("click", function (e) {
    TOP.scrollIntoView({ behavior: "smooth" })
  })

效果如下图所示

js回到页面指定位置的三种方式

从效果上来看,该api和scrollTo的作用是一致的,但是从代码结构上来说,scrollIntoView会更加的简洁且在iframe中表现也很优秀,基本上被用到的频率更高

以上三种方法是我目前比较常用的,更多相关js回到指定位置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
htm调用JS代码
Mar 15 Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 #Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 #Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 #Javascript
原生JS实现拖拽功能
Dec 16 #Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 #Vue.js
You might like
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
js left,right,mid函数
2008/06/10 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
档案接收函
2014/01/13 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
大学生村官考核材料
2014/05/23 职场文书
教师求职信
2014/06/17 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
关于职业道德的心得体会
2016/01/18 职场文书