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 相关文章推荐
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
去除html代码里面的script正则方法
May 19 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
React 子组件向父组件传值的方法
2017/07/24 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python实现备份目录的方法
2015/08/03 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python检索特定内容的文本文件实例
2018/06/05 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
分享一个python的aes加密代码
2020/12/22 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
师范类求职信
2014/06/21 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书