返回顶部 原生js

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量312 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44409748/article/details/131449726
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <style>
        .go-top {
            position: fixed;
            right: 3%;
            bottom: 10%;
            width: 40px;
            height: 40px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            border-radius: 50px;
            background-color: white;
            box-shadow: 0px 0px 5px lightgray;
            cursor: pointer;
        }

        .go-top span {
            width: 18px;
            height: 24px;
            display: block;
        }

        .go-top {
            background: green;
        }
        .go-top:hover {
            background-color: #ee1d23;
            transform: translate(0.2s);
            /* transition-delay: 0.5s; */
            transition-duration: 0.3s;

        }
    </style>
</head>

<body>

    <h1>TOP</h1>
    <h1>···往下滑···</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1></h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>···继续滑···</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>···点击右侧UP标签看效果···</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>----------</h1>
    <h1>bb</h1>


    <div class="go-top"><span>up</span></div>


    <script>
        //反回顶部
        var goTop = document.querySelector('.go-top')
        goTop.onclick = function () {
            scrollToTop()
        }
        function scrollToTop(duration = 750) {
            let easeingFunction = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
            let originScrollY = pageYOffset;
            let originScrollX = pageXOffset; // Keep abscissa
            let originTime = Date.now();
            let passedTime = 0;
            let _scrollToTop = () => {
                if (passedTime < duration) {
                    passedTime = Date.now() - originTime;
                    requestAnimationFrame(_scrollToTop);
                    scrollTo(originScrollX, originScrollY * (1 - easeingFunction(passedTime / duration)));
                }
            };
            _scrollToTop();
        }

        // 超过首屏500px之后Up but才展示
        $(document).ready(function () {
            $(".go-top").hide();
            $(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 500) {
                        $(".go-top").fadeIn(500);
                    }
                    else {
                        $(".go-top").fadeOut(500);
                    }
                });
                $(".go-top").click(function () {
                    $('body,html').animate({ scrollTop: 0 }, 100);
                    return false;
                });
            });
        });
    </script>
</body>

</html>

努力学习的lr
关注
原生js实现返回顶部缓冲效果
10-20
【原生JS实现返回顶部缓冲效果】是一种常见的网页交互功能，它允许用户通过点击一个按钮快速将页面滚动回到顶部，并且在滚动过程中提供平滑的动画效果，提高用户体验。以下是对这一功能的详细解释和实现步骤： ### ...
原生JS实现平滑回到顶部组件
10-22
下面是一个简洁的原生JS实现返回顶部组件的示例： ```javascript var BackTop = function (domE, distance) { if (!domE) return; var _onscroll = window.onscroll, _onclick = domE.onclick; window....
js 返回顶部 原生js
wys997的博客
06-20 194
1、纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2、纯js，带动画版本 1. var scrollToTop = window.setInterval(function() { var pos = window.pageYOffset; if ( pos > 0 ) { window.scrollTo( 0, pos - 20 ); // how far to scrol
【小河今学 | JavaScript】原生JS返回顶部效果
LB_laber的博客
08-07 452
原生JS返回顶部效果
原生JS返回顶部
m0_46101895的博客
02-25 1586
原生JS返回顶部 window.onload = function(){ var obtn = document.getElementById('btn'); //获取回到顶部按钮的ID var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度 var timer = null; //定义一个定时器 var isTop = true; //定义一个布尔值，用于判断是否到达顶部 wi
JS原生点击返回顶部(可直接粘贴复制使用)
zy的博客
01-05 730
本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。 JS代码： // 当网页向下滑动 20px 出现"返回顶部" 按钮 window.onscroll = function() {scrollFunction()}; function scrollFunction() {console.log(121); if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
原生js实现回到顶部
m0_75192581的博客
09-04 104
【代码】原生js实现回到顶部。
原生JS之回到顶部
weixin_44186636的博客
01-11 352
文章目录前言具体代码如下1.HTML代码2.CSS3.JS代码总结 前言 笔者原来是写vue.js，最近一个项目是用原生方法来写JS代码。今天用原生 JS代码写了一个回到顶部，所以将其记录下来，方便给其他读者提供参考。 具体代码如下 1.HTML代码 // 可将TOP换成图片 <a class="to-top" href="javascript:;" id="toTop">TOP</a> 2.CSS 代码如下（示例）： .to-top { position: fixe
案例——原生js返回顶部
gmh1118的博客
01-29 94
原生JS实现返回顶部案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部的案例</title> <style> body, div { margin: 0; padding: 0; -webkit
原生js返回顶部动画
fairyier
05-04 1132
基于上一篇写的获取页面垂直滚动值的方法，完成原生js返回顶部动画效果： var backTop = document.getElementById('zyHung').getElementsByClassName('top')[0]; backTop.onclick = function () { __backToTop(300); } /** ...
回到顶部案例（原生JS）
LeslieCheung_的博客
03-22 874
回到顶部用锚的方式咱就不讲了，非常的简单。 作为一个小白，直接能想到的方式就是用定时器来控制滚轮，代码如下： HTML 1.增加body的宽度，使其出现滚动条 2.创建一个div，点击改div则回到顶部 <body style="height: 3000px;"> <div id="backTop" class="backTop"></div> </bod...
返回顶部，简易原生js
05-07
当页面滚动条下滑到一定的位置出现返回顶部按钮，点击该按钮可以回到网页顶部，完全原生js编写，适用于js初学者
原生JS实现的平滑返回顶部特效源码.zip
11-10
这个"原生JS实现的平滑返回顶部特效源码.zip"文件包含了一个使用JavaScript（尤其是原生JS，即非jQuery等库）编写的实现该功能的代码示例。以下是对这个知识点的详细说明： 首先，平滑返回顶部特效的核心在于模拟...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 842
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 408
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 567
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1158
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 305
【代码】如何使用Redisson的布隆过滤器？
原生JS实现返回顶部与折叠菜单效果
首先，我们关注的是原生JS返回顶部的效果。这一功能旨在当用户滚动页面超过一定高度时，提供一个便捷的方式让他们快速返回页面顶部。具体需求包括： 1. 创建一个有滚动条的页面布局。 2. 当页面滚动高度大于浏览器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值