页面快速定位到指定位置的几个方法

AlanKeene 发布于2019-08-22 18:10 / 731人阅读

摘要：但是就页面定位到指定位置其实还有更好的办法，就是使用去获取指定位置的，这样的话还可以加滑动动画，使定位的这个过程比较平滑。

需求

页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。

需求分析

拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js

解法

想到使用锚点事情就比较简单了，借用a标签的href定位，很快就写了一个Demo，
完整代码：https://codepen.io/yangyang11...
关键代码：


  
    锚点1
    锚点2
    锚点3
  
  anchor1
  anchor2
  anchor3

这时候，点击悬浮的button，页面可以实现快速定位。

坑1

点了几遍之后立马就发现了一个坑，因为按钮是悬浮的，而锚点定位，默认是定位到窗口顶端，这样定位到的区域就会有一部分被悬浮的按钮挡住
如下图：
原始状态：

点击“锚点1”按钮之后（黄色框起来的部分就是被遮盖起来的部分）：

由此引出一个问题，怎么使a标签的锚点不定位到窗口最顶端?

怎么使a标签的锚点定位到窗口的任意位置 方法1：

网上搜了一些方法，其中有提到使用:target，主要添加几行css

#anchor1:target, #anchor2:target, #anchor3:target {
  padding-top: 100px;  // 这里更改padding-top的值使其定位到不同地方
}

效果如下图：

虽然可以实现文字的不被遮挡，但是实际上，对于固定大小的div来说，很容易影响div的内部布局，故不适用我这里的情况（然而这里的:target在其他地方作用还是非常大的。

方法二

换别的思路，想了个巧办法，在每个需要定位的节点前面加一个辅助节点，辅助节点的高度可以自定，锚点的实际定位的是这个辅助节点
完整代码：https://codepen.io/yangyang11...
关键代码：

  
    锚点1
    锚点2
    锚点3
  
  
    
    
    anchor1
  
  
    
    anchor2
  
  
    
    anchor3
  
辅助节点的css:
.assist-div {
  width: 1px;
  height: 1px;
  position: absolute;
  top: -100px; // 这里可以设任意高度 对应锚点最后离窗口顶端的距离
  left: 0;
}

这个方法的优点：
(一)辅助节点可以绝对定位不影响布局
(二)改变辅助节点的top值可以实现锚点定位到窗口任意位置
最后效果截图：(点击了“锚点2“按钮)

坑2

正当我美滋滋的交付任务，坐等1h之后的聚餐的时候，PM来找我说，不行，移动端打开的时候，我切换点了几下悬浮的按钮之后，要点很多下返回键才能退出页面。
我：对啊因为每点一次按钮就在浏览器记录里面添加一条记录
PM：这不行需要解决掉
。。。
这是个问题，需要用户点击很多下才能退出页面体验确实不好，如果想要用户点击一次就退出页面，就得始终保持history只有一条记录，但是a标签跳转的话自动往history加一条记录，我也不能对此做什么。
。。。
这时候不得不使用js了，
我盯着锚点看了会儿(实际上看了半小时:) )发现:

例如http://shili.com/Demo.html#content1 这样的url，是可以直接定位到http://shili.com/Demo.html 这个页面的id为content1的节点处的，这样的话，我不使用a标签，直接使用js去动态改变url后面的#id 的id，也可以实现定位的效果，并且还能实现浏览器只保存一条记录。

完整代码：https://codepen.io/yangyang11...
关键代码：

去除a标签，改为使用div，并添加click：

    锚点1
    锚点2
    锚点3

  function goToAnchor(anchorId) {
    // 使用replace方法可以保证前一次浏览不会在浏览器中保留记录
    window.location.replace(window.location.href.split("#")[0] + anchorId);
  }

至此，需求就完成了。
但是就页面定位到指定位置其实还有更好的办法，就是使用js去获取指定位置的offsetTop，这样的话还可以加滑动动画，使定位的这个过程比较平滑。我没有使用这个方法是因为，一我开始就一心想使用锚点结果只能遇坑填坑，二我的页面中有很多折叠的部分（类似于手风琴效果），所以每次的offsetTop都可能是不一样的，点击时都需要去获取offsetTop的值再移动，比较麻烦而且耗性能。（emmm虽然我一开始就抗拒使用js去解决，最后还是使用了，但是抉择之下还是使用性能消耗小的比较好
这里也丢一下采用上面这个方法的关键代码

document.getElementById("content").scrollTop = document.getElementById(anchorId).offsetTop - 100;

2019.3.26日更新
使用js去实现的话，还有一种方法，使用：Element.scrollIntoView方法，我试了下，这个方法也很好用，还可以自定义滑动方式，性能上，相较于上面的js方法要好，代码如下：




    测试

GPU云服务器云服务器 php定位页面位置定位到多个位置滚动到指定位置解析域名到指定页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95574.html

CSS 最核心的几个概念

摘要：本文将讲述中最核心的几个概念，包括盒模型等。块级元素的默认为，而内联元素则是根据其自身的内容或子元素来决定其宽度。如果该元素的下一个兄弟元素中有内联元素通常是文字，则会围绕该元素显示，形成类似文字围绕图片的效果。本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们...

SwordFly 2019-08-28 17:51 评论0 收藏0
浏览器元素尺寸与位置查询指南

摘要：前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

lei___ 2019-08-26 13:44 评论0 收藏0
HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

摘要：年前放假的最后一天，我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固，当回忆定格。这是属于我和的独家记忆。年前放假的最后一天，我们上线了「My Flyme 独家记忆」 H5 活动宣传页。因种种原因，直到放假前几天，才突然要求我们参与并开始项目的前端部分。此时大概的情况是：所有数据已计算完毕；后端接口已完成待联调；交互视觉只出了不到四分之一(一共二十多个页面)；我...

Anonymous1 2019-08-20 14:13 评论0 收藏0