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

2024-04-25 15:48
文章标签 实现 完美 回到 顶部

本文主要是介绍完美实现一个“回到顶部”,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

640?wx_fmt=gif

作者:wuwhs

segmentfault.com/a/1190000016839122

前言

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

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

scroll-behavior

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

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

 

html, body {

  scroll-behavior: smooth;

}

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

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

 

.tab label {

  padding: 10px;

  border: 1px solid #ccc;

  margin-right: -1px;

  text-align: center;

  float: left;

  overflow: hidden;

}


.tab::after {

  content: "";

  display: table;

  clear: both;

}


.box {

  height: 200px;

  border: 1px solid #ccc;

  scroll-behavior: smooth;

  overflow: hidden;

  margin-top: 10px;

}


.item {

  height: 100%;

  position: relative;

  overflow: hidden;

}


.item input {

  position: absolute;

  top: 0;

  height: 100%;

  width: 1px;

  border: 0;

  padding: 0;

  margin: 0;

  clip: rect(0 0 0 0);

}


<h1>纯CSS选项卡</h1>

<div class="tab">

  <label for="tab1">选项卡1</label>

  <label for="tab2">选项卡2</label>

  <label for="tab3">选项卡3</label>

</div>

<div class="box">

  <div class="item">

    <input type="text" id="tab1">

    <p>选项卡1内容</p>

  </div>

  <div class="item">

    <input type="text" id="tab2">

    <p>选项卡2内容</p>

  </div>

  <div class="item">

    <input type="text" id="tab3">

    <p>选项卡3内容</p>

  </div>

</div>

实现效果

640?wx_fmt=gif

也可以戳这里:https://wuwhs.github.io/demo/scrollIntoView/css-tab.html

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

640?wx_fmt=png

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

Element.scrollIntoView()

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

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

 

{

  behavior: "auto" | "instant" | "smooth",

  block: "start" | "end",

}

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

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

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

浏览器支持

640?wx_fmt=png

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

向下兼容

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

判断是否支持scroll-behavior属性

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

 

if(typeof window.getComputedStyle(document.body).scrollBehavior === 'undefined') {

  // 兼容js代码

} else {

  // 原生滚动api

  // Element.scrollIntoView()

}

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

缓冲算法

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

 

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

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

 

<div class="content">

    <p>很多内容。。。</p>

    ...

  </div>

  <section class="back-to-top">

    回到顶部

  </section>


.content {

  height: 3000px;

  border: 1px solid #ccc;

  box-shadow: 0 0 2px solid;

}


.back-to-top {

  width: 18px;

  padding: 10px;

  border: 1px solid #ccc;

  box-shadow: 0 0 2px #333;

  position: fixed;

  right: 20px;

  bottom: 40px;

}


.back-to-top:hover {

  cursor: pointer;

}


var scrollTopSmooth = function (position) {

  // 不存在原生`requestAnimationFrame`,用`setTimeout`模拟替代

  if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = function (cb) {

      return setTimeout(cb, 17);

    };

  }

  // 当前滚动高度

  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // step

  var step = function () {

    var distance = position - scrollTop;

    scrollTop = scrollTop + distance / 5;

    if (Math.abs(distance) < 1) {

      window.scrollTo(0, position);

    } else {

      window.scrollTo(0, scrollTop);

      requestAnimationFrame(step);

    }

  };

  step();

}


$backToTop = document.querySelector('.back-to-top')

$backToTop.addEventListener('click', function () {

  scrollTopSmooth(0);

}, false);

</script>

效果图

640?wx_fmt=gif

或者戳这里:https://wuwhs.github.io/demo/scrollIntoView/index.html

简单封装

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

 

/**

* 缓冲函数

* @param {Number} position 当前滚动位置

* @param {Number} destination 目标位置

* @param {Number} rate 缓动率

* @param {Function} callback 缓动结束回调函数 两个参数分别是当前位置和是否结束

*/

var easeout = function (position, destination, rate, callback) {

  if (position === destination || typeof destination !== 'number') {

    return false;

  }

  destination = destination || 0;

  rate = rate || 2;


  // 不存在原生`requestAnimationFrame`,用`setTimeout`模拟替代

  if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = function (fn) {

      return setTimeout(fn, 17);

    }

  }


  var step = function () {

    position = position + (destination - position) / rate;

    if (Math.abs(destination - position) < 1) {

      callback(destination, true);

      return;

    }

    callback(position, false);

    requestAnimationFrame(step);

  };

  step();

}

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

 

var scrollTopSmooth = function (position) {

  // 当前滚动高度

  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  easeout(scrollTop, position, 5, function (val) {

    window.scrollTo(0, val);

  });

}


$backToTop = document.querySelector('.back-to-top')

$backToTop.addEventListener('click', function () {

  scrollTopSmooth(200);

}, false);

总结

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

  1. <html><body>标签加上scroll-behavior: smooth;属性;

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

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

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

640?wx_fmt=jpeg


这篇关于完美实现一个“回到顶部”的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/935115

相关文章

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟