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

以前大部分时间都是在做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)
  })

效果如下图所示

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

经大佬提示，可以在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' })
  })

效果如下图所示

从效果上来看，相较于 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" })
  })

效果如下图所示

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

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

赞 (0)

相关推荐

  • 基于JavaScript实现点击页面任何位置返回

    基于JavaScript实现点击页面任何位置返回

    废话不多说了,直接上关键代码了. <include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script&g

  • JS返回页面时自动回滚到历史浏览位置

    在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用. 在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下: 页面缓存 使用方法 用法也很简单,咱一步一步讲. 首先,在你需要缓存标签容器的类名中加入cache,并写一个na

  • js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: 第一种方案 将上一个页面的div的scrolltop距离长度记录在cookie中,然后通过js调整刷新页面时的长度记录,代码如下: js代码: <script> var _h = 0; function SetH(o) { _h = o.scrollTop SetCookie("a&q

  • JS实现页面进入和返回定位到具体位置

    其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了.例如,某些元素是在某种情况下才加上的,又或者多级定位. 目前,我知道的返回定位到具体位置有两种方法: ①利用id定位,在跳转的时候带上某个模块的id,返回的时候定位到该处. ②利用距离顶部的距离,在跳转的时候带上当前位置滚动过的距离,返回的时候定位到该处. 一般应用场景: 定位到某一个模块的时候,有二级定位的时候利用方法①. 定位到具体位置的时候,定位到某一个模块的时候,利用方

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

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

    以前大部分时间都是在做b端相关的项目,在实现此类需求时,通常都是直接借助 a 标签搞定,现在做c端了,对交互性的要求一下就提升了,此时 a 标签就远远不能满足要求了,需要借助js来实现此类需求,特此记录. a 标签 首先放出html <body> <contain class="test1"> <a name="topAnchor"></a> <div id="top">我是顶部<

  • javascript中为某个元素指定事件的三种方式

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法 三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写

  • asp.net 实现静态页面累加访问量的三种方式

    静态页面 staticHtml.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> &

  • Java字符串中指定部分反转的三种方式

    目录 方式一:把字符串转化为char[] 方式二:使用String的拼接 方式三:使用StringBuffer/StringBuilder替换String 附实战例子 总结 将“asdfghj”反转为“ashgfdj” 方式一:把字符串转化为char[] 调用String类中toCharArray()方法把字符串转化为字符,而后开始时索引和结束时索引利用for()循环反转指定字符,结束 public class StringDemo { public static void main(Strin

  • JS弹出对话框实现方法(三种方式)

    本文实例讲述了JS弹出对话框实现方法.分享给大家供大家参考,具体如下: 1.警告框 <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框!!") } </script> </head> <body> <input type="button" onclick=&

  • 详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

  • 详解JavaScript实现JS弹窗的三种方式

    详解JavaScript实现JS弹窗的三种方式

    目录 一.前言 二.什么是JavaScript,有什么用? 三.HTML嵌入JavaScript的方式: 第一种方式: 第二种方式: 第三种方式: 总结 一.前言 html和css的学习大致完成,我们进入重要的JavaScript学习阶段 二.什么是JavaScript,有什么用? Javascript是运行在浏览器上的脚本语言.简称JS. 他的出现让原来静态的页面动起来了,更加的生动. 三.HTML嵌入JavaScript的方式: 第一种方式: 1.要实现的功能: 用户点击以下按钮,弹出消息框

  • js实现页面跳转的五种方法推荐

    js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo

  • JS中动态创建元素的三种方法总结(推荐)

    JS中动态创建元素的三种方法总结(推荐)

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

  • 前端js文件合并的三种方式推荐

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页面大文件,各自页面合并生成自己所需js的大文件. 3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件. 另外在我看来,合并有两个目的: 1. 为了减少请求数. 2. 代码安全考虑(文件分得越多,越容易被人看清). PS:注意我说的不是压缩混淆,只是合并 1. 一

随机推荐