JS实现回到顶部功能

最新推荐文章于 2024-03-19 10:15:00 发布
最新推荐文章于 2024-03-19 10:15:00 发布
阅读量202 收藏
点赞数
文章标签： html5 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzsan_/article/details/123874032
版权 
<!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>
      #top {
          /* 隐藏 */
          display: none;
          /* 固定定位 */
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 80px;
          height: 40px;
          background-color: red;
          color:white;
          text-align: center;
      }
    </style>
    <script>
        window.onscroll=function(){
            var oBtn=document.getElementById("top");
            //兼容标准浏览器和IE浏览器
            // 滚动条距离顶部的距离
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            if(scrollTop>480){
                // 显示
                oBtn.style.display='block';
            }else {
                 // 隐藏
                 oBtn.style.display='none';
            }
            oBtn.onclick=function(){
                document.documentElement.scrollTop=document.body.scrollTop=0;
            }
        }
      
    </script>
</head>
<body>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbbbbbbbbbbb</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>ccccccccccccccccccccccc</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>ddddddddddddddddddddddddd</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>eeeeeeeeeeeeeeeeeeeeeeee</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>fffffffffffffffffffffff</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>gggggggggggggggggggggggg</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>hhhhhhhhhhhhhhhhhhhhhhhh</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>
  
   
    <button id="top">
        回到顶部
    </button>
    
</body>
</html>

lzsan_
关注
JavaScript练习小案例-----回到顶部
m0_61656944的博客
02-06 360
<style> * { margin: 0; padding: 0; } body{ height: 3000px; } .header{ width: 100%; height: 40px; display: flex; justify-cont..
用js实现简单的点击返回顶部效果
weixin_30414155的博客
03-08 234
当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。 实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。 要点一：document.documentElement.clientWidth || do...
js实现返回顶部功能的解决方案
weixin_33843409的博客
12-14 150
很多网站上都有返回顶部的效果，主要有如下几种解决方案。 1、纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2、纯js，带动画版本 生硬版： var scrollToTop = window.setInterval(function() { var p...
js回到顶部
qq719756146的博客
01-23 375
scrollTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var setI = setInterval(() =&gt; { ...
JavaScript简单实现网页回到顶部功能
10-26
总的来说，JavaScript 简单实现网页回到顶部功能主要依赖于滚动位置的获取、平滑滚动的实现以及事件绑定。通过理解这些基本原理，你可以根据需求调整参数，创造出更符合用户体验的返回顶部效果。在实际项目中，还...
JavaScript回到顶部功能实现
03-26
本文将详细介绍如何使用JavaScript实现这一功能。 首先，我们可以在HTML中创建一个"回到顶部"的按钮，通常将其设置为固定在页面底部或右下角，以便用户随时可见。按钮可以是简单的HTML元素，如`<a>`或`<button>`，...
js实现返回顶部效果
10-20
最后，是实现返回顶部功能的核心JavaScript代码。这段代码首先使用jQuery库（文档中通过`script`标签引入了`jquery.js`文件）来监听窗口的滚动事件（`scroll`）。当滚动事件触发时，会执行一个函数，这个函数通过...
基于JS实现回到页面顶部的五种写法(从实现到增强)
10-21
在实现回到顶部功能的基础上，可以进一步通过CSS增强功能按钮的视觉效果。例如，通过CSS画图将功能按钮变成图形化设计，这样可以吸引用户的注意并提升用户体验。同时，利用CSS伪元素和伪类hover效果，当用户的鼠标...
JS采用绝对定位实现回到顶部效果完整实例
10-22
标题中的“JS采用绝对定位实现回到顶部效果完整实例”指的是使用JavaScript编程语言，结合CSS的绝对定位技术，来创建一个可以将网页滚动条平滑地滚动回页面顶部的功能。这个功能通常通过一个“回到顶部”的按钮来...
js动态返回顶部
12-26
把引用的JS文件放在div标签下面 <div id="gotop">返回顶部</div> [removed][removed]
利用js实现返回页面顶部
04-20
NULL 博文链接：https://ihenu.iteye.com/blog/1885565
JS实现回到顶部
qq_73842669的博客
01-13 888
JS实现回到顶部
返回顶部JS
weixin_33757609的博客
03-13 123
CSS #back-to-top{ position: fixed; bottom:20px; right: 20px; } JS var backBtn=$("#back-to-top"); function backToTop() { $("html,body").animate({ scrollTop: 0 ...
返回顶部 js
weixin_30807677的博客
12-19 63
返回顶部： 1.可以在网页添加锚链接 2.利用js 可以实现动画效果 <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>goTop</title> <style type="text/css"> * {margin:0;p...
js练习总结
aohudai3633的博客
08-16 695
1.div返回顶部 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。 实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。 要点一：document.documentElement.c...
js简单的返回顶部
VibMike的博客
06-20 6250
1、一般这种都伴随着浏览器离开顶部后出现回到顶部的div，然后点击div回到顶部，然后判断你的页面处于浏览器顶部，隐藏你的回到顶部按钮，需要去判断你的浏览器是否位于顶部csdn的回到顶部按钮2、我实现的思路比较简单，写一个透明的，高度只有1像素的div放在最顶上，让js判断浏览器窗口的高度是否大于div的高度，大于就显示你的回到顶部，小于就隐藏3、写一个用来回滚到顶部的按钮，设置样式并固定它在你想要固定的高度上（浏览器窗口）4、写一个div撑开浏览器高度（页面原来够高出现滚动条忽略这个）5、js部分，先获取
js实现页面返回顶部效果
777
10-07 250
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;返回顶部&amp;lt;/title&amp;g
【JavaScript】---- 纯 js 实现返回页面顶部
最新发布
止于至善
03-19 1921
由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！实现了平滑滚动到顶部；在滚动完成后执行回调函数。
JavaScript实现点击返回顶部功能
这个功能通常通过一个可见的按钮实现，当用户滚动页面到一定位置时，该按钮会显示出来，用户点击后，页面会平滑地滚动回顶部。 给定的代码段是用JavaScript编写的，它定义了一个匿名函数来实现这一功能。首先，创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值