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 相关文章推荐
jquery的键盘事件修改代码
Feb 24 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue实现pdf文档在线预览功能
Nov 26 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 Calender(日历)代码分享
2014/01/03 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
javascript jQuery插件练习
2008/12/24 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
解读python logging模块的使用方法
2018/04/17 Python
Python实现的简单计算器功能详解
2018/08/25 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
给老婆的搞笑检讨书
2014/01/12 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
九一八事变演讲稿
2014/09/05 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
员工工作表扬信
2015/05/05 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android