js效果之回到顶部

最新推荐文章于 2024-04-11 19:52:47 发布
原创 最新推荐文章于 2024-04-11 19:52:47 发布 · 76 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        .up {
            display: none; width: 100px; height: 100px; background: red;
            position: fixed; right: 10px; bottom: 20px;
        }
    </style>
    <script>
        var num = 0;
        window.onscroll = function(){
            var up = document.getElementById("top");
            //当前页面滚动的距离？？
            var _top = document.body.scrollTop || document.documentElement.scrollTop;
            if(_top >= 1000){
                up.style.display = "block";
            } else {
                up.style.display = "none";
            }
        }
        function goTop(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>
    <body>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
        <div id="top" class="up" onclick="goTop()" >回到顶部</div>
    </body>
</html>

　　

 
 
js盒子模型案例之回到顶部
qq_44419617的博客
12-12 293
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #back{ position: f.
vue.js实现回到顶部动画效果
01-19
最近使用vue.js做了几个页面，其中有一个回到顶部的动画效果记录下。 html如下： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>回到顶部</title> <META ...
JavaScript实现回到顶部效果
前端开发,HTML5,css3,JavaScript,node.js,vue
11-01 730
可以通过element.scrollTop的方法实现回到顶部的效果,如下:
js vue实现回到顶部动画效果
m0_60721695的博客
04-11 143
width:40px;right:25px;
js回到顶部，带过渡动画效果
海贼王某人的博客
05-12 1967
先来看看实现的效果： js点击回到顶部添加过渡动画效果 这里我就直接贴js代码了，html代码我就不写了，就是回到顶部按钮的一个点击事件，我用的vue,this.myTimer是data函数里面的一个变量，你可以自己声明一个变量，主要是用做定时器的 代码如下: toTop() { // 返回顶部,添加过度动画，如果下拉距离超过10000，就统一0.8秒回到顶部，否则按默认速度
js实现回到顶部效果
DreamFJ的博客
09-13 2475
功能： 滚动到第二屏才出现“返回顶部”按钮； 点击“返回顶部”按钮会返回顶部，而且速度越来越慢； 在返回顶部的途中如果用鼠标滚一下滚轮会停止返回顶部的滚动。 &lt;script&gt; window.onload = function() { 获取回到顶部的按钮 var btn = document.getElementBy...
javascript 设置返回顶部的效果
O_osange的博客
01-11 1227
javaScript 设置返回顶部的效果
js实现一个有过渡效果的回到顶部
weixin_44474589的博客
04-15 1512
js实现一个简单有过渡效果的回到顶部 <span style="position: fixed;width: 50px;height: 50px;border-radius: 50%;text-align: center;line-height: 50px;bottom: 50px;right: 50px;background: #fff;box-shadow: 1px 1px 10px #...
JS实现回到顶部效果（带动画）
PorkCanteen的博客
11-23 988
用js函数实现触发后页面逐渐滚动回顶部的效果。
用javascript实现回到顶部效果
有只猫七的博客
10-01 1540
主要知识点： DOM操作：1，document.getElementById()  根据id获取标签元素                       2，document.documentElement.scrollTop  滚动条的数值，可读写 事件运用：1，window.onload()     页面加载完毕后触发                      2，onclick()
js 平滑回到顶部
weixin_47581490的博客
05-05 483
behavior: 'smooth', // 平滑过渡。方法四：直接回到顶部（无过渡效果）方法三：锚点定位（无过渡效果）
javascript 回到顶部效果的实现代码
10-26
这可以通过JavaScript来实现，而本篇文章主要介绍了一种用JavaScript实现回到顶部效果的代码实现方法。以下是这篇文章中包含的知识点： 1. JavaScript实现回到顶部的基本原理： 实现回到顶部的效果，主要利用了...
js实现返回顶部效果
10-20
通过设置`scrollTop`属性为`0`，并将动画执行的时间设置为`speed`参数（这里的`speed`是自定义的一个速度值，可以根据需要调整动画速度），可以让页面在点击按钮后平滑地滚动回顶部。 实现这样的功能，还有其他几种...
JS采用绝对定位实现回到顶部效果完整实例
10-22
标题中的“JS采用绝对定位实现回到顶部效果完整实例”指的是使用JavaScript编程语言，结合CSS的绝对定位技术，来创建一个可以将网页滚动条平滑地滚动回页面顶部的功能。这个功能通常通过一个“回到顶部”的按钮来...
【数据库技术】SQL语言基础操作示例：创建学生表、插入与查询数据入门教程
08-22
内容概要：本文档提供了一个简单的SQL语言示例，旨在帮助初学者快速掌握SQL的基本操作。示例的功能是创建一个学生表并插入数据，然后查询所有学生信息。首先，通过`CREATE TABLE`语句创建一个名为Students的表，定义了表的结构，包括id（自动递增主键）、name（非空字符串）、age（整数）和grade（字符串）四个字段。接着，利用`INSERT INTO`语句向表中插入了三条学生记录。最后，使用`SELECT * FROM`语句查询并显示了表中的所有数据。文中还简要介绍了运行这些SQL语句的方法，包括打开MySQL客户端、连接到指定数据库以及执行代码的具体步骤。 适合人群：对SQL语言感兴趣的初学者，尤其是刚开始接触数据库操作的新手。 使用场景及目标：①学习如何在SQL中创建表，定义表结构；②掌握向表中插入数据的方法；③学会使用查询语句从表中检索数据。 其他说明：此示例基于MySQL数据库，但大部分SQL语法具有通用性，适用于其他关系型数据库系统。建议读者按照文中提供的步骤，在自己的环境中实际操作，以便更好地理解和掌握SQL的基本概念和操作。
python38-pytz-2019.3-3.module_el8.5.0+742+dbad1979.tar.gz
最新发布
08-22
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
2024 年大模型面试必备宝典：全方位知识梳理与高效应试指南
08-22
资源下载链接为： https://pan.quark.cn/s/262584c7179b 在大模型蓬勃发展的当下，无论是校招还是社招，大模型相关岗位竞争愈发激烈，面试难度也不断攀升。为助力大家成功应对大模型面试，特推出《2024 大模型面试全攻略》 。 这本攻略全面且系统，从基础理论到进阶应用，从模型微调技巧到前沿技术探索，涵盖了大模型面试的各个关键领域。它不仅梳理了主流开源模型体系的特点与应用场景，如 GPT 系列、BERT、XLNet 等；还深入剖析了模型训练过程中的关键环节，像预训练与微调的流程及要点。 在面试题方面，无论是基础的 “目前主流的开源模型体系有哪些”“大模型 LLM 的架构介绍”，还是进阶的 “如何让大模型处理更长的文本”“如何缓解 LLMs 复读机问题”，亦或是微调相关的 “如果想要在某个模型基础上做全参数微调，究竟需要多少显存” 等高频问题，都能在其中找到详细解答。 此外，针对 LangChain、参数高效微调（PEFT）等热门技术，攻略也提供了丰富的面试问答与深度解析，帮助读者精准把握面试要点，提升面试成功率 。无论是初涉大模型领域的新手，还是寻求突破的资深从业者，《2024 大模型面试全攻略》都将是你求职路上的得力助手，助你在大模型面试中脱颖而出 。
python3-zxcvbn-4.4.28-2.el8.tar.gz
08-22
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
基于Python + Django的AD_Exchange管理系统.zip
08-22
基于Python + Django的AD_Exchange管理系统.zip
简单实用的JS-jquery回到顶部效果代码
**JS回顶部/Jquery回顶部/Js返回顶部/jquery回到顶部**：这些标签进一步明确了代码的功能是关于让页面支持回到顶部的操作。同时，标签中同时使用了大小写和不同字符组合（如"Jquery"与"jquery"），可能是为了兼容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值