一键回到顶部

于 2022-08-31 14:39:57 发布
阅读量150 收藏
点赞数
文章标签： html 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66592791/article/details/126623272
版权

<!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>

    <style>

//css部分

        *{

            margin: 0;

            padding: 0;

        }

//让网页足够长出现滚动条

        body{

            width: 100%;

            height: 3000px;

            background-color: aquamarine;

        }

//一键回到顶部的按钮，初始为隐藏

        .box{

            width: 20px;

            height: 20px;

            position: fixed;

            right: 100px;

            bottom: 100px;

            background-color: black;

            display: none;

            /* transition: top 0.5s linear; */

        }

//顶部通栏 初始隐藏在窗口上面

        .dingbu{

            width: 100%;

            height: 80px;

            background-color: beige;

            position: fixed;

            top: -80px;

            transition: top 0.5s linear;

        }

    </style>

</head>

<body>

    <input class="box" ></input>

    <div class="dingbu"></div>

//js部分

    <script>

        // 获取元素

        var dingbu=document.querySelector('.dingbu');

        var box=document.querySelector('.box');

        // 滚动事件

        window.οnscrοll=function(){

            // 获取滚动  卷曲的高度

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

            console.log(height);

//判断是否卷曲超过500px超过显示通栏 显示按钮否则不显示

            if(height>500)

            {

                dingbu.style.top='0px';

                box.style.display='block';

            }else

            {

                dingbu.style.top='-80px';

                box.style.display='none';

            }

        }

//给按钮添加点击事件点击后利用window.scrollTo({})方法实现

        box.οnclick=function(){

            window.scrollTo({

           top:0,

          left:0,

          behavior: "smooth"

        });

        }

    </script>

</body>

</html>

 关于window.scrollTo方法的使用

window.scrollTo({

           top:0,

          left:0,

          behavior: "smooth"

        });

behavior的参数

1.smooth 匀速滑动到目标位置

2.instant 瞬间滚到目标位置

范哲的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这几种方法帮你快速实现回到页面顶部
「 虚幻私塾」
04-24 2867
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 背景介绍 当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “
一键返回顶部
weixin_45650546的博客
06-10 177
.container { width: 980px; margin: 0 auto; height: auto; position: relative; } #goToTop { position: fixed; bottom: 0; right: 0%; z-index: 1000; width: 38px; height: 41px; } #goToTop a { display: block; width: 100%; border-radius: 3px; -
前端学习（2141）：webpack的使用过程
歌谣的博客
09-04 198
main.js const { add, mul } = require('./mathUtils.js') console.log(add(20, 30)) console.log(mul(20, 30)) import { name, age, height } from "./info" console.log(name) console.log(age) console.log(height) mainutils.js function add(num1, num2) { re
一键返回页面顶部
Tyler_YC的博客
09-17 671
一键返回页面顶部方法 1.直接使用window.scrollTop(x,y)方法,参数传入位置数值: window.scrollTop(0,0) 2.兼容所有浏览器,一键返回页面顶部: function ReturnTop() { //判断是否有父页面 if (window.top == window.self) { document.body.scrollTop = document.documentElement.scrollTop = 0; } else {
快速返回顶部
hangGe0111的博客
08-22 2112
1.css .backToTop { width: 0.84rem; height: 0.84rem; position: fixed; right: 4%; bottom: 1.2rem; display: none; z-index: 999; background-image: url(data:image/png;base64,iVBORw0KGgoAAAA...
商城首页一键回到顶部功能实现（包括ListView, RecyclerView 和 ScrollView）
12-17
在Android应用开发中，"一键回到顶部"功能是常见的用户交互设计，特别是在电商类商城应用中，能够提高用户的浏览体验。这个功能通常通过一个浮动动作按钮（FloatingActionButton）来实现，当用户滚动页面到一定位置...
仿淘宝回到顶部
05-07
在电子商务网站设计中，"回到顶部"功能是一个非常实用且用户体验友好的元素，尤其是在像淘宝这样的大型购物平台中。这个功能允许用户快速便捷地返回页面的顶部，无需滚动整个页面，提高了浏览效率。ShopEx易开店作为...
android中LinearLayoutManager一键返回顶部示例
08-31
本文将详细介绍如何在使用LinearLayoutManager的RecyclerView中实现一键返回顶部的功能。 首先，我们需要实现一个方法来计算当前RecyclerView已经滑动的总距离。由于LinearLayoutManager没有直接提供获取总滑动距离...
vue实现移动端返回顶部
10-14
在本文中，我们将探讨如何在Vue.js框架下实现一个移动端返回顶部的功能。这个功能对于长页面的移动应用尤其有用，它允许用户快速滚动回页面的顶部。我们将会分析两个不同的实现方案，这两个方案都基于Vue组件结构。 ...
一键Top回到顶部
weixin_45629623的博客
07-23 307
直接上效果图，html、样式就不写了 .wrapper-content表示的就是类。你想哪个div哪个class一键置顶就选哪个。 scrollTop是指滚动栏 querySelector的介绍它会比较详细 HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似 backTop () { let el = document.querySelector('.wrapper-content')
页面中简单的一键返回顶部功能
不想做码农的博客
05-31 2905
页面中简单的一键返回顶部功能html部分css部分js部分效果 html部分 <div> <button onclick="returnTop()" id="btnTop" title="返回顶部"><img src="返回顶部.png"></button> </div> css部分 /* return top */ #btnTop { display: none; position: fixed; bottom: 20px
JQuery实现一键返回顶部
haandxc的博客
03-16 1897
本文主要实现一键返回顶部的功能，具体返回顶部的图片及样式在js文件中定义。 下面是yestop.js中的代码： /*! * YesTop(jQuery GoToTop) * version: 1.1.2 * Copyright (c) 2015 HoverTree * http://hovertree.com * http://hovertree.com/texiao/yestop/ */ (
JS实现一键回到顶部的功能(兼容所有浏览器，超级详细)
CreatorRay的博客
06-30 5056
我们在浏览网页的时候，大部分都有一个一键回到顶部的按钮，无论是pc端还是移动端，这个功能都很常见。我在一次面试的时候，也要求手写这个功能。 首先我们新建一个空页面，把body的高度设置为3000px。这样做的目的是让浏览器出现滚动条，不然我们还得放很多的内容把页面撑起来。 body { height: 3000px; } html部分我们写两个div，一个是标志位，放在浏览器的顶部，这样我们就能很直观的知道什么时候到了浏览器顶部。另一个div就是我们返回顶部的按钮。 <div id="t.
html一键回到顶部,jQuery超实用返回顶部插件
weixin_32401075的博客
06-03 296
返回顶部按钮能够帮助用户快速平滑的返回到页面的顶部。HTML结构在body标签结束之前添加返回顶部按钮：TopCSS样式返回顶部按钮始终出现在页面的右边。初始化时它是不可见的：visibility:hidden; 和 opacity:0;。这两个属性可以通过2个class来控制：.cd-is-visible 和.cd-fade-out。.cd-top.cd-is-visible {/* the b...
html一键返回顶部算法,一句jQuery代码实现返回顶部效果（简单实用）
weixin_26840895的博客
06-03 153
使用方法：只需引用jQuery库和YesTop插件，然后一句代码就可以实现返回顶部：引用代码：使用代码：$(document).ready(function () { $.fn.yestop(); })也就是：$.fn.yestop();这句代码就可以了。当然还有高级的设置，如换图片，设置图标为圆形，设置位置，设置时间等等。详情请查看其他Demo。完整代码，保存到HTML文件就可以体验效果：Yes...
一键回到页面顶部_双击两下这个按钮，1秒窜回微信顶部，别怪我没告诉你
weixin_32340873的博客
01-16 3653
对于大家经常使用的聊天工具有没有很熟练呢？微信的出现拉近了人与人之间的距离，同样熟练使用微信可以节约很多时间带来很多便利，微信里面有很多小技巧等着我们去发掘，下面为大家分享一个小技巧，可以快速窜回微信顶部，很多页面都可以使用。消息页面中相信大家肯定有很多好友是设置为置顶的，可以在消息发送过来第一时间进行查看。但是也有不常联系的朋友偶尔会发消息联系，这时怎样快速找到发消息的联系人呢？这里可以尝试双击...
vue一键回到顶部按钮
最新发布
12-02
根据提供的引用内容，我们可以实现一个基于Vue的一键回到顶部按钮，具体实现过程如下： 1. 在Vue组件中添加一个按钮元素，用于触发回到顶部事件。 2. 在Vue组件的data中添加一个变量isShowBackTop，用于控制回到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值