首页 > 其他分享 >页面滚动点击返回至顶部,js怎么实现

页面滚动点击返回至顶部,js怎么实现

时间:2023-12-04 10:13:51浏览次数:35  
标签:stepTotal stepNo js 点击 DOCTYPE scrollTop document 页面

当页面要滚回顶部时,使用scrollTop属性,设置值为0即可

  • 当页面具有 DOCTYPE,或者说指定了 DOCTYPE 时,使用document.documentElement.scrollTop
  • 当页面不具有 DOCTYPE,或者说没有指定了 DOCTYPE 时,使用document.body.scrollTop
  • 为了兼容各种情况,建议同时使用这两种写法。
  • document.documentElement.scrollTop = 0
    document.body.scrollTop = 0

    实现页面平滑过渡滚回之顶部,但是Safari 明确表示不支持smooth

  • window.scrollTo({
        top: 0,
        behavior: "smooth"
    });

    模仿曲线滑动效果,这里先安装bezier-easing这个库

  • import BezierEasing from "bezier-easing";
    
    const easingFunc = BezierEasing(0.42, 0, 1, 1);
    const scrollTop = easingFunc(0.5)
    function animateSetScrollTop({ target = document.documentElement, start, end, stepNo = 1, stepTotal }: StepOptions) {
        const next = getNextScrollTopValue(start, end, stepNo, stepTotal);
        window.requestAnimationFrame(() => {
            setElementScrollTop({
                target,
                value: next,
            });
            if (stepNo !== stepTotal) {
                const nextStepNo = stepNo + 1;
                animateSetScrollTop({
                    target,
                    start,
                    end,
                    stepNo: nextStepNo,
                    stepTotal,
                });
            }
        });
    }

     

标签:stepTotal,stepNo,js,点击,DOCTYPE,scrollTop,document,页面
From: https://www.cnblogs.com/xiaoqilaile/p/17874297.html

相关文章

  • emscripten 中c 代码引用外部js 函数
    主要是一个简单的学习,webassebly支持通过import调用环境的函数(比如调用浏览器或者nodejs中的一些方法)简单说明方法很多,包含了emscripten提供的调用js的宏,但是以下使用了一个emscripten提供的--js-library功能--js-library简单说明--js-library主要是实现emcc在编译的时......
  • JSON
    JSON.stringify和JSON.parseJSON.stringify():作用:用于将JavaScript对象或值转换为JSON字符串语法:JSON.stringify(value[,replacer[,space]])value:要转换为JSON字符串的值replacer(可选):用于控制转换过程的函数或数组space(可选):控制结果字......
  • 后端 Java 对象转 json(不用第三方依赖的拼接方式)
    需求:编写工具类要尽可能不用任意一个jar包依赖,或者尽可能精简原有数据:ArpsParams{actualProduction=[{mouth=2022-07,oilProdDaily=366088.33},{mouth=2022-08,oilProdDaily=380806.78}],predictionSegment=[{mouth=2022-07,oilProdDaily=367832.31},{mouth=2022-0......
  • 全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
    JSSDK使用步骤步骤一:绑定安全域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。步骤二:引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性,当上述资源不......
  • 12.adb命令启动页面
    包和Activity(活动页)的概念package包:是Android应用的唯一标志Activity活动页:Android应用页面,一个页面就是一个Activity获取当前的页面名1、打开手机app应用的某个页面2、打开命令行工具执行命令:adbshell"dumpsyswindow|grepmCurrentFocus"获取启动页面......
  • dump 日志收集与分析(jmap 和 jstack 工具)讲解与实战操作
    目录一、概述二、常见的dump工具三、dump可能会导致进程卡住风险(生产谨慎操作)四、安装JDK五、jmap介绍与示例讲解1)jmap介绍2)Kafka安装(单机)1、下载安装包2、配置环境变量3、配置kafka3、配置ZooKeeper4、启动kafka5、验证3)示例讲解【示例一】执行jmap命令查看内存使用情况【......
  • vue3中css使用js中的变量
    <scriptsetuplang="ts">import{SoundOutlined}from'@ant-design/icons-vue'constprops=defineProps({title:{type:String,default:''},color:{type:String,default:'#000'}......
  • 初始NestJS
    根据官网所说Nest(NestJS)是一个用于构建高效、可扩展Node.js服务器端应用程序的框架。它使用渐进式的JavaScript,完全支持并构建于TypeScript上(同时仍然允许开发者使用纯JavaScript进行编码),结合了面向对象编程(OOP)、函数式编程(FP)和函数响应式编程(FRP)的元素。那么我们先看看Nest......
  • 3-4 极语言字体框类、查找替换类、页面框类、打印类——成员表
    中文名字英文名称长度作用解释字体框类CHOOSEFONT60弹出一个选取颜色的对话框,并得到颜色相关信息。函数:ChooseFont字体框类——成员表中文英文类型作用解释长度lStructSize整数指定这个结构的大小,以字节为单位。窗口hwndOwner整数拥有对话框的窗口的句柄。可不指定设备hDC整数显示......
  • nodejs002
    数组//数组//Java数组必须是同一类型//但是js的数组没有数据类型区分,一个数组里既可以有数值,字符等letarr=[1,3,4,2,5,6,7,2,3]//数组的长度letlen=arr.length//遍历arr.forEach(item=>{console.log(item);})//数组的过滤,把符合条件的结果,返回新的数......