前言：我在项目中，需要实现一个发布评论，然后让页面滚动到发布评论的位置。之后百度了几种方法，一一验证之后都不能实现，下面将列出使用后出现的问题。以及自己的尝试。
1 - 3 这种方法得到的document.body.scrollTop一直等于0.各种异步都试了，白扯。对了用a的锚点也不行，修改target指向本页面也不行，好像vue不支持。补充：大部分情况下1-3这几种方法是可以解决的。遇到问题先考虑：是否是代码位置写错了。
方法1//先获取目标位置距离mounted() {this.$nextTick(() => {setTimeout(() => {let targetbox= document.getElementById('targetbox');this.target= targetbox.offsetTop; })})}//再滑动指定距离document.body.scrollTop = this.target;
方法2：this.$nextTick(() => {this.$refs.DOM.scrollTo(0,200);this.$refs.result.scrollIntoView({ behavior: "smooth" });})
方法3document.getElementById("target").scrollIntoView();
2.以下是我的思路，以及尝试 : 在"评论列表"里面监听滚动, 记录滚动位置weizhi, 从‘点击发布按钮’返回到"评论列表"里面的时候, 读取 weizhi.
vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式.
步骤1：
mounted () {// 读setTimeut(function(){document.body.scrollTop = parseInt(sessionStorage.getItem('weizhi'));}, 1000);// 存window.onscroll = function () {sessionStorage.setItem('weizhi', document.body.scrollTop);}}
执行步骤1 ，遇到问题了：遇见了一个问题: 每次返回文章评论, 都是直接滚动到顶部, 每次都是, 每次都是! 把weizhi打印出来,发现是 0,明明切换之前 还是的, 回来就不是了. 然后发现了路由每次切换都会触发 onscroll 事件, 日了狗, 为毛.我都没有滚动页面, 为什么会触发 onscroll 事件。 刚开始怀疑 hash 变化会导致 onscroll 事件的触发, 所以我就在浏览器里面手动输入了几个不存在的路由: /aaa/bbb没有发现 scroll 被触发, 所以这个排除. 然后怀疑 vue-router 里面是不是绑定了 scroll 事件, 没发现然后又想, 没绑定 scroll 事件, 那么修改 scrollTop 值会不会也触发 scroll 事件.好吧还发现新知识点了: scrollTop 值的改变, 的确会触发 scroll 事件.那么我就想, 是不是 vue-router 里面存在修改 scrollTop 值的行为, 也没有发现. 然后我又想, 数据是动态渲染的, 所以是不是和元素的增删改查相关。 元素增加-> 页面高度变了 -> 页面高度变化, 也触发 scroll 事件? 所以我用 vue-cli 新建了项目, 放了两个没有增删改查的路由 然后日了狗的, 我看见从 aaa-> bbb -> aaa, 的时候, aaa的滚动条位置还在之前我滚动到的地方. 突然想起来浏览器是可以自己记录滚动条位置的. 是不是浏览器干的? 从详情页返回到列表页面, 列表会重新渲染, 时序大概是这样: 返回列表页 1 渲染页面 2 而浏览器恢复滚动条的位置的操作, 是在 1 和 2 之间,这个时候就出问题了:如果你页面上面的数据都是渲染出来的, 浏览器就会 发现: 页面的高度<=屏幕的高度, 不存在滚动条, 此时 document.body.scrollTop = 0; 所以会设置 document.body.scrollTop = 0 修改了 document.body.scrollTop 触发了 scroll 事件, scroll 里面又重写了 weizhi 等你数据渲染结束之后, 读到的就是 0了. 如果发现你页面高度大于屏幕高度, 但是页面高度是 n, 而 weizhi 的值是: n + x, 比当前页面的最大的 scrollTop 值还大, 这个时候, document.body.scrollTop 的值就会等于 n. 当你的数据渲染结束, 开始定位, 日了吉娃娃, 没定准.
再来：1 先绑定 scroll 事件:
var map = {};window.onscroll = function() {map[location.hash] = document.body.scrollTop;}
2再屏蔽掉浏览器自动恢复滚动位置行为带来的影响 a 在 hashchange 时强制 document.body.scrollTop = 0 b 在 scroll 事件里面, 当 document.body.scrollTop = 0 的时候不做 存操作.
var map = {};window.onhashchange = function() {document.body.scrollTop = 0;}window.onscroll = function() {if (document.body.scrollTop) {// 存map[location.hash] = document.body.scrollTop;} else {// 读}}
3在读操作里面, 设置一个定时任务, 去判断 document.body.scrollTop 的值和你保存的位置是不是相同的
var map = {};window.onhashchange = function() {document.body.scrollTop = 0;}window.onscroll = function() {if (document.body.scrollTop) {// 存map[location.hash] = document.body.scrollTop;} else {var timer = null;timer = setInterval(function(){if (document.body.scrollTop == map[location.hash]) {clearInterval(timer);} else {document.body.scrollTop = map[location.hash];}}, 20);}}
总结：头大了一圈，睡觉。来日再回来改吧。
