资讯专栏INFORMATION COLUMN

完美实现一个“回到顶部”

littlelightss / 2809人阅读

摘要:在浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑回到顶部,只需在这两个标签上都加上准确的说,写在容器元素上,可以让容器非鼠标手势触发的滚动变得平滑,而不局限于,标签。

前言

在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要的效果是要有点缓冲效果。

现代浏览器陆续意识到了这种需求,scrollIntoView意思是滚动到可视,css中提供了scroll-behavior属性,js有Element.scrollIntoView()方法。

scroll-behavior

scroll-behavior属性可取值auto|smooth|inherit|unset

scroll-behavior: smooth;是我们想要的缓冲效果。在PC浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑“回到顶部”,只需在这两个标签上都加上:

</>复制代码

  1. html, body {
  2. scroll-behavior: smooth;
  3. }

准确的说,写在容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑,而不局限于标签。

利用这个css属性可以一步将原来纯css标签直接切换,变成平滑过渡切换效果。

</>复制代码

  1. .tab label {
  2. padding: 10px;
  3. border: 1px solid #ccc;
  4. margin-right: -1px;
  5. text-align: center;
  6. float: left;
  7. overflow: hidden;
  8. }
  9. .tab::after {
  10. content: "";
  11. display: table;
  12. clear: both;
  13. }
  14. .box {
  15. height: 200px;
  16. border: 1px solid #ccc;
  17. scroll-behavior: smooth;
  18. overflow: hidden;
  19. margin-top: 10px;
  20. }
  21. .item {
  22. height: 100%;
  23. position: relative;
  24. overflow: hidden;
  25. }
  26. .item input {
  27. position: absolute;
  28. top: 0;
  29. height: 100%;
  30. width: 1px;
  31. border: 0;
  32. padding: 0;
  33. margin: 0;
  34. clip: rect(0 0 0 0);
  35. }

</>复制代码

  1. 纯CSS选项卡

  2. 选项卡1内容

  3. 选项卡2内容

  4. 选项卡3内容

实现效果

也可以戳这里

再来看一下这个css属性scroll-behavior在各大浏览器中的支持情况

呃~支持度不是很好,这样一行css代码能应用上当然是最好的,不行就退化成一闪而过的效果咯。下面再看下js提供的api。

Element.scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

</>复制代码

  1. element.scrollIntoView(); // 等同于element.scrollIntoView(true)
    element.scrollIntoView(alignToTop); // Boolean型参数
    element.scrollIntoView(scrollIntoViewOptions); // Object型参数
参数alignToTop

一个Boolean值:

如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。

如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}

参数scrollIntoViewOptions

一个带有选项的 object

</>复制代码

  1. {
  2. behavior: "auto" | "instant" | "smooth",
  3. block: "start" | "end",
  4. }

behavior 可选
定义缓动动画, "auto", "instant", 或 "smooth" 之一。默认为 "auto"。

block 可选
"start", "center", "end", 或 "nearest"之一。默认为 "center"

inline 可选
"start", "center", "end", 或 "nearest"之一。默认为 "nearest"

浏览器支持

可以看到对于无参数的情况支持还是很好的,有参数的该API在浏览器中支持不是很好,我们可以同时结合CSS设置scroll-behavior: smooth;滚动效果,在执行滚动使用target.scrollIntoView(),即可达到“完美滚动”(不太完美)效果。

向下兼容

要达到所有浏览器都有相同(类似)效果,那就要把剩余不支持scroll-behavior属性的浏览器揪出来,用js去完成使命了。

判断是否支持scroll-behavior属性

很简单,用以下这一行代码

</>复制代码

  1. if(typeof window.getComputedStyle(document.body).scrollBehavior === "undefined") {
  2. // 兼容js代码
  3. } else {
  4. // 原生滚动api
  5. // Element.scrollIntoView()
  6. }

判断是否支持scroll-behavior属性,直接利用原生Element.scrollIntoView()滚动,否则向下兼容处理。

缓冲算法

缓冲的直观效果是越来越慢,直到停止,也就是在相同时间内运动的距离越来越短。这样可以设置一个定时器,移动到当前点到目标点距离的缓冲率(比如1/2,1/3,...)处,比如,缓冲率设为2,当前距离目标点64px,下一秒就是32px,然后16px,8px...,到达某个阈值结束,也就是:

</>复制代码

  1. var position = position + (destination - position) / n;

下面来简单实现一个点击右下方的”回到顶部“按钮,页面缓动滚动到顶部的demo。

</>复制代码

  1. 很多内容。。。

  2. ...
  3. 回到顶部

</>复制代码

  1. .content {
  2. height: 3000px;
  3. border: 1px solid #ccc;
  4. box-shadow: 0 0 2px solid;
  5. }
  6. .back-to-top {
  7. width: 18px;
  8. padding: 10px;
  9. border: 1px solid #ccc;
  10. box-shadow: 0 0 2px #333;
  11. position: fixed;
  12. right: 20px;
  13. bottom: 40px;
  14. }
  15. .back-to-top:hover {
  16. cursor: pointer;
  17. }

</>复制代码

  1. var scrollTopSmooth = function (position) {
  2. // 不存在原生`requestAnimationFrame`,用`setTimeout`模拟替代
  3. if (!window.requestAnimationFrame) {
  4. window.requestAnimationFrame = function (cb) {
  5. return setTimeout(cb, 17);
  6. };
  7. }
  8. // 当前滚动高度
  9. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  10. // step
  11. var step = function () {
  12. var distance = position - scrollTop;
  13. scrollTop = scrollTop + distance / 5;
  14. if (Math.abs(distance) < 1) {
  15. window.scrollTo(0, position);
  16. } else {
  17. window.scrollTo(0, scrollTop);
  18. requestAnimationFrame(step);
  19. }
  20. };
  21. step();
  22. }
  23. $backToTop = document.querySelector(".back-to-top")
  24. $backToTop.addEventListener("click", function () {
  25. scrollTopSmooth(0);
  26. }, false);

效果图

或者戳这里

简单封装

上面的小demo中,缓冲算法和当前滚动业务代码耦合在一起了,下面多带带拆解出多带带一个函数。

</>复制代码

  1. /**
  2. * 缓冲函数
  3. * @param {Number} position 当前滚动位置
  4. * @param {Number} destination 目标位置
  5. * @param {Number} rate 缓动率
  6. * @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束
  7. */
  8. var easeout = function (position, destination, rate, callback) {
  9. if (position === destination || typeof destination !== "number") {
  10. return false;
  11. }
  12. destination = destination || 0;
  13. rate = rate || 2;
  14. // 不存在原生`requestAnimationFrame`,用`setTimeout`模拟替代
  15. if (!window.requestAnimationFrame) {
  16. window.requestAnimationFrame = function (fn) {
  17. return setTimeout(fn, 17);
  18. }
  19. }
  20. var step = function () {
  21. position = position + (destination - position) / rate;
  22. if (Math.abs(destination - position) < 1) {
  23. callback(destination, true);
  24. return;
  25. }
  26. callback(position, false);
  27. requestAnimationFrame(step);
  28. };
  29. step();
  30. }

拆分后,这个小缓冲算法就可以被重复调用啦,而且,适用于滚动到指定位置(不仅仅是到顶部)和缓冲率(控制滚动快慢),当前小demo调用:

</>复制代码

  1. var scrollTopSmooth = function (position) {
  2. // 当前滚动高度
  3. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  4. easeout(scrollTop, position, 5, function (val) {
  5. window.scrollTo(0, val);
  6. });
  7. }
  8. $backToTop = document.querySelector(".back-to-top")
  9. $backToTop.addEventListener("click", function () {
  10. scrollTopSmooth(200);
  11. }, false);
总结

综合来看,简单实现一个完美滚动注意以下即可

标签加上scroll-behavior: smooth;属性;

判断当前浏览器是否支持scrollBehavior属性;

如果支持直接用原生滚动apiElement.scrollIntoView()

如果不支持则用js小缓冲算法兼容处理。

完~

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

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

相关文章

  • 完美实现一个回到顶部

    摘要:在浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑回到顶部,只需在这两个标签上都加上准确的说,写在容器元素上,可以让容器非鼠标手势触发的滚动变得平滑,而不局限于,标签。 前言 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要...

    layman 评论0 收藏0
  • 【译】无限滚动加载最佳实践

    摘要:优秀无限滚动的五项原则将无限滚动做好,并不是不可能完成的任务。提供为特定项添加书签的可能无限滚动最常见的缺点之一就是,内容出现的时候,没法添加书签。结论无限滚动实现得好的话,可以达到令人难以置信的光滑无缝体验。 本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/673原文:https://uxplanet.org/infinite-scrolli...

    Sunxb 评论0 收藏0
  • javascript模块化(二)--RequireJS初探

    摘要:看完视频初步认识了一下,以及模块化开发的概念,在此做一下总结。所以应该将功能抽象成模块。并且非常耗性能解决办法,在滚动条正在运动或者已经到达目的地,就不应该执行动画。 前言:在慕课网上跟着视频《侧边工具栏开发》做了一遍,用到了jquery操作DOM,其中,用requirejs管理模块依赖,然后自定义了两个模块它们都依赖jquery,并且其中一个自定义模块依赖另一个,所以要暴露出接口。看...

    edgardeng 评论0 收藏0
  • 前端实例练习 - 回到顶部

    摘要:回到顶部代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 回到顶部 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材...

    hedzr 评论0 收藏0
  • 前端实例练习 - 回到顶部

    摘要:回到顶部代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 回到顶部 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材...

    王陆宽 评论0 收藏0

发表评论

0条评论

littlelightss

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<