记 · 滚动条滚动到指定位置(锚点)的不同实现方式

imingyu 发布于2019-08-02 16:16 / 2986人阅读

摘要：那什么是锚点问题呢锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。这是标签提供给我们的锚点解决方式。滚动条缓慢滚动到此为止，一个完整的锚点缓慢滚动就完成了，快去试试吧

最近项目中遇到传统的锚点问题。那什么是锚点问题呢？

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。并且可以对网站内容通过菜单进行快速定位。

上图所示为锚点示意图，那这种需求我们怎么实现呢？下面我就来提供一些在不同场景下，可以使用的锚点方式。

1.first blood

在传统开发过程中，我们的锚点都是通过a标签跳转至对应ID的形式进行需求实现的。

Menu1
Menu2

Content1
Content2

这是a标签提供给我们的锚点解决方式。

2.double kill

原生js去获取并修改scrollTop

这种情况，我们一般用于固定页面元素的锚点设置，或者设置返回顶部按钮。

// 通过element.scrollTop来获取当前元素滚动条高度
// 可以在控制台输出下
document.documentElement.scrollTop  ====> number  
// 返回一个number类型的内容，是滚动条的高度


// 也可以通过给scrollTop赋值去设置滚动条高度
// 在控制台输出
document.documentElement.scrollTop = 0
// 会发现已经滚动的滚动条，滚动到页面最顶端。

在js的世界里，浏览器的兼容性总是让人那么头疼

Safari中使用的是 window.pageYOffset
IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop；

所以考虑到浏览器兼容性问题，最后总结出一句完美兼容的代码。

// 获取滚动条高度兼容性写法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

3.triple kill

Element.scrollIntoView()
这个方法在MDN上的解释是实验中的功能，但是亲测主流浏览器是可用，并且出奇的好用。话不多说，直接上代码。

// 将某个元素跳转到浏览器视口的最上方
element.scrollIntoView()

语法:

// 等同于element.scrollIntoView(true) 
element.scrollIntoView();

// Boolean型参数
// true  元素的顶端将和其所在滚动区的可视区域的顶端对齐 ； false 元素的底端将和其所在滚动区的可视区域的底端对齐 
element.scrollIntoView(alignToTop); 

// 一个带有选项的object：
// {
//     behavior: "auto"(默认)  | "instant" | "smooth"(缓动),
//     block:    "start" | "end",
// }
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

4.quadra kill

目前来讲基本的锚点功能已经实现了，点击menu就会跳转到对应的content

但是看起来还是有些生硬。咻~ 的一下就过去了，所以加个缓动来提升下用户体验吧。

在你需要滚动的div的样式里面加一句。

scroll-behavior: smooth; // 滚动条缓慢滚动

5.penta kill

到此为止，一个完整的锚点缓慢滚动就完成了，快去试试吧！！！

GPU云服务器云服务器滚动到指定位置滚动条位置复位滚动到原来位置滚动条html实现

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

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

记 · 滚动条滚动到指定位置(锚点)的不同实现方式

摘要：那什么是锚点问题呢锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。这是标签提供给我们的锚点解决方式。滚动条缓慢滚动到此为止，一个完整的锚点缓慢滚动就完成了，快去试试吧 showImg(https://segmentfault.com/img/bVbslYF);最近项目中遇到传统的锚点问题。那什么是锚点问题呢？锚点是网页...

kidsamong 2019-08-26 13:43 评论0 收藏0
可视化效果(Visual effects)

摘要：一般地，一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下，元素不会被裁剪。在闭合路径内的内容会显示，而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地，一个块盒的内容都被限制在该盒的content边内。某些情况下，一个盒可能会溢出，意味着它的部分内容或者全部内容位于该盒外部，例如：一行无法拆分，导致行盒比...

JowayYoung 2019-08-29 12:37 评论0 收藏0
浅说虚拟列表的实现原理

摘要：虚拟列表的实现有多种方案，本文以组件为基础进行分析。常见的无限滚动便是延迟渲染的一种实现，而虚拟列表则是按需渲染的一种实现。接下来，本文会简单介绍虚拟列表的一种实现方案。实现本章节将会创建一个组件，并结合代码，慢慢梳理虚拟列表的实现。在列表数据的展示优化一文中，提到了对于列表形态的数据展示的按需渲染。这种方式是指根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分...

赵春朋 2019-08-23 12:25 评论0 收藏0
前端知识点总结——HTML

摘要：跨列从指定单元格的位置处开始，横向向右合并几个单元格包含自己，被合并的单元格要删除。前端知识点总结——HTML HTML：HTML4.01 指的就是网页技术HTML5：HTML4.01的升级版本 1.web的基础知识 web与Internet 1.Internet:全球性的计算机互联网络，因特网，互联网，交互网 2.提供服务访问网站：www（world wide web）服务 ...

sourcenode 2019-08-01 18:37 评论0 收藏0
返回顶部的几种实现

摘要：返回顶部这里初始状态的返回顶部为不可见，通过判断页面滚动高度切换显示隐藏，的样式可以自己设计。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回顶部的按钮大家并不陌生，针对长滚动条的信息流页面添加返回顶部的按钮可以给用户良好的体验，而返回顶部的实现也是多种多样，本文分享几个案例并给出评价作为引子讲一个常用的案例...

SillyMonkey 2019-08-02 15:56 评论0 收藏0