js实现悬浮按钮并回到页面顶部

最新推荐文章于 2023-03-28 17:32:34 发布
最新推荐文章于 2023-03-28 17:32:34 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： JavaScript 技术人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjzzy/article/details/109248188
版权

判断document.body.scrollTop 和 document.documentElement.scrollTop

其中一个大于零时，显示按钮，利用JavaScript的scrollTo将页面滚动到顶，并隐藏按钮。

 

 

 

 

代码（比其他版本，修正了对element.scrolltop的判断）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂浮回顶部按钮</title>
<style>
body{
height:2000px;
}
.rTop{
width:100px; height:25px;
text-align:center; font-size:small;
line-height:25px; border:1px solid #999;
position:fixed; right:0; bottom:0;
border-bottom-color:#333; 
border-right-color:#333; margin:5px;
cursor:pointer; display:none
}
</style>
<script>
<!--拖动滚动条或滚动鼠标轮-->
window.onscroll=function(){
    if(document.body.scrollTop||document.documentElement.scrollTop){
        document.getElementById('rTop').style.display="block"
    }else{
    document.getElementById('rTop').style.display="none"
    button1style.cursor="hand"
}
}
<!--点击“返回顶部”按钮-->
function toTop(){
    window.scrollTo('0','0');
    button1style = document.getElementById('rTop').style;
    button1style.display="none"
    //button1style.cursor="hand"
    document.getElementById('rTop').style.display="none"
}
function moreTest(){
    for(let i =0; i< 50; i++){
       document.write("sss"+i+"<br>");
    }
}
</script>
</head>
<body>
    <div class="rTop" id="rTop" onClick="toTop()">返回顶部</div>
    <h1>顶部</h1>

    <h3><script>moreTest()</script></h3>

    <h1>底部</h1>
</body>
</html>

 

龙哥虎弟
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现顶部悬浮、一键回到顶部
weixin_43513126的博客
07-11 1711
目录效果图：html、css 代码实现：js代码实现： js实现顶部悬浮、一键回到顶部。 效果图： html、css 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
js实现页面滚动返回顶部
60rzvvbj的博客
07-31 7612
许多网站的右下角都有一个可以使页面返回顶部的按钮 例如这些网站： 返回顶部我们可以用锚点链接来实现，但是锚点链接它突然闪到页面顶部有点不太好看 如果页面是滚动着回到顶部的话会好看很多 那么，开始今天的正题 #前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码在后面 先搞几个盒子和一个用来添加点击事件的按钮 <div>模块1</div> <div>模块2</div> <div>模块3</div> <div>模块4
纯js实现悬浮按钮组件
10-20
主要为大家详细介绍了纯js实现悬浮按钮组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序实现可拖动的悬浮按钮
10-14
主要为大家详细介绍了小程序实现可拖动的悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
10-21
主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下
超酷js提示框悬浮框
08-04
title的格式 title="header=[...] body=[...]" 直接打开就可以看到效果，很炫的哦
js 悬浮按钮，支持PC和移动端拖动
moyebaobei1的博客
05-14 2037
Cesium 安卓版的App 打包成功了，下面需要实现一个类似苹果home 的功能。要求很简单，需要在Web和移动端支持home键的移动。js实现逻辑如下 function move_home(dragId, dragLink) { var startEvt, moveEvt, endEvt // 判断是否支持触摸事件 if ('ontouchstart' in window) { start
div悬浮在canvas上
11-24
div悬浮在canvas之上
html2canvas 起始位置,javascript – 在Html2Canvas中的渲染上,页面滚动到顶部
weixin_39846186的博客
06-04 350
我看了看html2canvas.js,看到如下：_html2canvas.Parse = function (images, options) {window.scroll(0,0);在评论了window.scroll(0,0)之后,在本地测试中对我很好.似乎这样的行为是作者的意图.当然,您也可以在触发代码时将当前的滚动位置保存为变量.你可以这样做的方式取决于你如何执行html2canvas.如果...
html5怎么把图片置顶,在html 5中，如何将div元素放置在canvas元素的顶部？
weixin_42525738的博客
05-30 958
有时这可能会发生在我的经验。 我不知道html5画布API中发生了什么。 如果你想在div元素下绘制一些图，可以使用img标签，下面列出。---此示例代码被写入用的prototype.js(1.6)---< -javascript-代码 - >var canvas = $('canvas');canvas.width = 200;canvas.height = 200;var ctx ...
深入学习JavaScript中的canvas绘图（上）！！！
帅帅邬同学的博客
04-29 600
Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 Canvas初...
js实现点击按钮返回顶部
m0_74913905的博客
03-28 1106
利用html+css+JavaScript实现当往下滑动超过400像素后，显示按钮，点击可返回顶部，
jQuery右端悬浮带返回顶部代码
11-12
jQuery右端悬浮带返回顶部代码
jQuery右侧悬浮返回顶部和分享按钮代码
06-10
一款带返回顶部按钮，微信二维码和微博分享按钮的jQuery网站右侧悬浮栏代码。
js实现漂浮回顶部按钮实例
12-07
在网页设计中，为了提供更好的用户体验，经常会在页面底部设置一个“返回顶部”的按钮，使得用户在浏览长页面时能够方便地快速返回页面顶部。本文将深入探讨如何使用JavaScript实现这个功能。 首先，我们来看一下...
悬浮按钮java_纯js实现悬浮按钮组件
weixin_31764625的博客
02-28 639
先上效果下面附上代码 使用方式很简单只需要 在页面引入这段js 即可$(()=> {let param = {tag: true,num: 1,ele: document.createElement('div'),icon: '',homeIcon: '',moreIcon: '',personalIcon: '',closeIcon: '',distance: '500',css...
canvas 悬浮效果
weixin_30443731的博客
05-15 1050
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="bubble">&...
js中获取body html元素
热门推荐
weixin_44638167的博客
09-10 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
canvas漂浮动画
MOONCOM的博客
11-21 1235
代码如下: canvas漂浮动画 body{ margin:0px; } canvas{ display:block; } var canHeight=0; //画布的宽度 var canWidth=0; //画布的长度 var canvas=null; //画布对象CanvasRenderingContextD var mouseTop
html悬浮按钮返回顶部
最新发布
09-12
要实现HTML悬浮按钮返回顶部的效果，你可以按照以下步骤进行操作。 首先，在HTML中添加两个div元素，一个用于显示顶部内容，另一个用于显示返回顶部按钮。为它们设置相应的class名和内容。 然后，在CSS中设置这两个元素的样式。对于顶部内容，可以设置宽度为100%，高度为80px，使用flex布局居中对齐文字，设置背景颜色和过渡效果，并将其定位为固定位置，初始时显示在页面顶部之外。 对于返回顶部按钮，可以设置宽度为50px，高度为50px，设置背景颜色和字体样式，并将其定位为固定位置，在页面底部右下角，默认隐藏。 接下来，在JavaScript中添加逻辑代码。使用滚动事件来判断浏览器卷去的高度是否大于等于一个临界点（比如300px），如果是，则设置顶部内容显示出来，返回顶部按钮显示出来；如果不是，则设置顶部内容隐藏，返回顶部按钮隐藏。 最后，在JavaScript中添加点击事件监听，当点击返回顶部按钮时，使用动画效果将页面滚动到顶部位置。 具体的代码实现可以参考以下示例代码。请注意，示例代码中的一些具体细节可能需要根据实际情况进行调整。 HTML代码： ``` <div class="header">顶部</div> <div class="goTop">回到顶部</div> ``` CSS代码： ``` .header { width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 30px; color: #fff; background-color: rgb(86, 226, 180); transition: top 0.5s linear; overflow: hidden; position: fixed; top: -80px; left: 0; } .goTop { width: 50px; height: 50px; background-color: pink; font-size: 20px; text-align: center; line-height: 25px; color: #fff; position: fixed; bottom: 50px; right: 50px; display: none; /* 默认隐藏 */ } ``` JavaScript代码： ``` document.addEventListener('DOMContentLoaded', function() { var header = document.querySelector('.header'); var goTop = document.querySelector('.goTop'); window.addEventListener('scroll', function() { var height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if (height >= 300) { header.style.top = '0px'; goTop.style.display = 'block'; } else { header.style.top = '-80px'; goTop.style.display = 'none'; } }); goTop.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); }); ``` 通过以上的HTML、CSS和JavaScript代码，你可以实现一个HTML悬浮按钮返回顶部的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值