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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
jquery radio 操作代码
Mar 16 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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默认安装产生系统漏洞
2006/10/09 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python制作抖音代码舞
2019/04/07 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
python实现猜单词游戏
2020/05/22 Python
ORACLE第二个十问
2013/12/14 面试题
电钳专业个人求职信
2014/01/04 职场文书
组织关系转移介绍信
2014/01/16 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
倡议书作文
2015/01/19 职场文书
高校教师个人总结
2015/02/10 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
MySQL注入基础练习
2021/05/30 MySQL
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL