页面返回顶部

最新推荐文章于 2023-11-12 19:12:34 发布
最新推荐文章于 2023-11-12 19:12:34 发布
阅读量305 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linglingpractice/article/details/128653069
版权

需求

  1. 点击按钮后可以由快到慢返回顶部
  2. 处于顶部时按钮消失
  3. 按钮位于页面右下方

效果展示

页面返回顶部

实现原理

  • 一开始隐藏按钮：设置为display：none，通过获取可视窗口的高度，当滚动距离大于20px时，将active属性添加给按钮，并设置为display:block
  • 然后给按钮添加点击事件，并通过计时器来实现循环；在滚动高度大于100px时，通过滚动条距顶部的高度实现减速

具体代码

JS部分

    <script>	
        window.onscroll=function(){        
            var height = document
			.documentElement.scrollTop 
            if (height > 100) {
                toTop.style.display = "block";
            } else {
                toTop.style.display = "none";
            }
        }
        toTop.onclick=function(){
            timer = setInterval(function () {
                var height = document
                //距离顶部的距离
				.documentElement.scrollTop 
                if (height == 0){
                    clearInterval(timer);
                    return;
                } 
                var speed = Math.ceil(-height/20);//实现减速
                document.documentElement.scrollTop=height+speed;
              
            }, 20);
        }
    </script>

完整代码

<!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>
     
 
        .container {
            height: 4000px;
            text-align: center;
            line-height: 25px;
        }
 
        button {
            width: 100px;
            height: 100px;
            position: fixed;
            bottom: 100px;
            right: 20px;
            background-color: #ab85a4;
            display: none;
        }
    </style>
</head>
 
<body>
    <div class="container">
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        all work and no play make jack a dull boy<br>
        <button id="toTop">返回顶部</button>
    </div>
 
    <script>	
        window.onscroll=function(){        
            var height = document
			.documentElement.scrollTop 
            if (height > 100) {
                toTop.style.display = "block";
            } else {
                toTop.style.display = "none";
            }
        }
        toTop.onclick=function(){
            timer = setInterval(function () {
                var height = document
                //距离顶部的距离
				.documentElement.scrollTop 
                if (height == 0){
                    clearInterval(timer);
                    return;
                } 
                var speed = Math.ceil(-height/20);
                document.documentElement.scrollTop=height+speed;
              
            }, 20);
        }
    </script>
</body>
 
</html>
最后一首练习曲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
返回页面顶部
sunzequan888的博客
07-15 415
JS返回页面顶部
JavaScript返回页面顶部
友人C君的博客
12-26 182
$(window).scrollTop(0);
页面效果 返回顶部
fareast_mzh的博客
08-20 1347
* 需要的图片   * html &lt;div id="back-to-top" class="back-to-top"&gt; &lt;div class="icon-text"&gt;&lt;span&gt;返回顶部&lt;/span&gt;&lt;/div&gt; &lt;div class="icon-arrow&qu
轻盈回顶：教你轻松实现网页返回顶部功能
最新发布
m0_55392280的博客
11-12 5001
在当今互联网时代，用户体验已成为前端开发的核心关注点。随着移动设备的普及，浏览长篇幅内容时，用户可能会感到操作繁琐，而回到顶部功能则为用户提供了一种快速定位到页面顶部的便捷方式。实现回到顶部功能已成为前端开发者必备的技能。本文旨在实现回到顶部功能的方法，以帮助开发者轻松掌握这一技术，提升用户体验。提示：以下是本篇文章正文内容，可供参考以上就是今天要讲的内容，本文仅仅简单介绍了回到顶部功能的实现，它能帮助用户快速定位到页面顶部，提高浏览体验。
jQuery中页面返回顶部的方法总结
10-20
本文给大家总结了关于jquery中页面返回顶部的方法小结，以及各个方法的优缺点介绍，非常不错，具有参考借鉴价值，需要的朋友参考下吧
纯js实现页面返回顶部的动画(超简单)
10-19
下面小编就为大家带来一篇纯js实现页面返回顶部的动画(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery本页面返回顶部
07-16
下面我们将深入探讨如何使用jQuery来实现“本页面返回顶部”的功能。 首先，我们需要在HTML页面中添加一个返回顶部的按钮。这个按钮通常放在页面底部或者侧边栏，当用户向下滚动时才会显示。一个简单的HTML结构可能...
6行代码实现微信小程序页面返回顶部效果
10-17
通过以上代码，我们实现了微信小程序页面返回顶部的功能。用户点击“顶部”按钮时，页面会平滑地滚动到顶部，提供了良好的用户体验。在实际开发中，可以根据需求调整样式和功能，例如添加更多交互效果或优化动画性能...
vue实现移动端返回顶部
10-14
第二个实现方法同样创建了一个名为`scrollTop`的组件，它包含一个返回顶部按钮，但按钮的显示与否是根据页面是否滚动超过200像素来判断的。这个判断是在`handleScroll`方法中完成的，该方法监听窗口的滚动事件。当`...
页面回到顶部的几种方法
qq_42758220的博客
02-14 6159
回到顶部的五种方法 一、锚点跳转 说明：为a标签的href属性可以链接id属性实现页内跳转，为顶部元素设置一个id属性即可。 代码如下： <div class="header" id="header"> 这是顶部 </div> <div class="btn"> <a href="#header">回到顶部</a><...
这几种方法帮你快速实现回到页面顶部
「 虚幻私塾」
04-24 2870
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 背景介绍 当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “
点击回到页面顶部
guoxuying的博客
11-04 1345
点击回到页面顶部
返回顶部的三种方法
叶才鑫
08-08 1万+
1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能 方法一：用命名锚点击返回到顶部预设的id为top的元素 html代码 a href="#top" target="_self">返回顶部a> 方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置） html代码 a href="javas
网页返回顶部的几种方法
djxhc的博客
03-17 1649
网页返回顶部的几种方法 1，在页面顶部固定一个 返回网页顶部的 按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #2C2C2C; text-decoration: none;...
JQuery点击事件回到页面顶部效果
热门推荐
zhuyu19911016520
09-27 5万+
//2个div，点击某个时回到顶部 111111111111111  top $(function(){   $("#top").click(function() {       $("html,body").animate({scrollTop:0}, 500);   });   })
回到顶部的几种实现方法
越努力，越幸运！
12-21 4万+
【1】使用默认链接锚点 添加一个a链接，设置a链接的href属性值为"#top"即可实现 <body> <div>我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><b...
Web JS实现页面返回顶部
槑头脑的博客
04-12 4697
采用js的scrollTop属性实现了一下这个简单的功能 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。
简单返回顶部代码及注释说明
weixin_30929295的博客
07-12 1856
最近做了一个排行榜页面，分类较多，并且以图文形式展示......最后页面明显过长了，用户体验自然不够好。最后想着在页面上部增加了页面内跳转导航，直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长，内容薄弱关联性不够的跳出率会很高。 下面就说下简单的返回顶部效果的代码实现，附注释说明。 1. 最简单的静态返回顶部...
sublime 页面底部返回顶部的代码
06-06
Sublime Text 编辑器本身没有返回顶部的功能，但你可以通过在 HTML 页面中添加一些代码实现该功能。以下是一个简单的示例： ```html 返回顶部">^ // 返回顶部按钮的显示和隐藏 $(window).scroll(function() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值