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 相关文章推荐
JavaScript访问样式表代码
Oct 15 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
详解Vue router路由
Nov 20 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
详解Python用户登录接口的方法
2019/04/17 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python实现视频读取和转化图片
2019/12/10 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
阿尔卡特(中国)的面试题目
2014/08/20 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
岗位职责范本
2013/11/23 职场文书
护士找工作求职信
2014/07/02 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
2014年绿化工作总结
2014/12/09 职场文书
红色经典观后感
2015/06/18 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Java常用函数式接口总结
2021/06/29 Java/Android
科普 | 业余无线电知识-波段篇
2022/02/18 无线电