返回顶部按钮的做法

最新推荐文章于 2025-09-12 16:56:45 发布
最新推荐文章于 2025-09-12 16:56:45 发布
阅读量71 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/darkterror/p/5007483.html
本文介绍了一个使用jQuery实现的页面滚动到一定位置时显示返回顶部按钮的效果，并附带了完整的HTML和JavaScript代码。当用户向下滚动页面超过窗口高度时，一个位于右下角的小按钮将淡入显示；点击该按钮会使页面平滑滚动回到顶部。

　　注意：1、 $('html,body').animate({scrollTop:0},1000);这句代码一定要一定要同时选中html及body两元素。

　　　　　2、 if($(window).scrollTop()>$(window).height())中，$(window).height()可以换成别的元素到浏览器最顶部的高度H，从而当窗口的scrollTop（）大于这个高度H的时候，需要显示的元素就会显示出来。

 

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 div{ width:80px; height:80px; background:#FC9; cursor: pointer; position:fixed; right:20px; bottom:20px; display:none;}
  8 </style>
  9 <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
 10 <script type="text/javascript">
 11 $(function(){
 12     $(window).scroll(function(e) {
 13         if($(window).scrollTop()>$(window).height()){
 14             $('div').fadeIn();
 15         }else{
 16             $('div').fadeOut();    
 17         }
 18     });    
 19     $('div').click(function(e) {
 20         $('html,body').animate({scrollTop:0},1000);
 21     });
 22 })
 23 </script>
 24 </head>
 25 
 26 <body>
 27 <div></div>
 28 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 29 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 30 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 31 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 32 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 33 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 34 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 35 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 36 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 37 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 38 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 39 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 40 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 41 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 42 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 43 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 44 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 45 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 46 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 47 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 48 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 49 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 50 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 51 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 52 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 53 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 54 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 55 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 56 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 57 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 58 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 59 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 60 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 61 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 62 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 63 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 64 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 65 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 66 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 67 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 68 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 69 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 70 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 71 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 72 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 73 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 74 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 75 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 76 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 77 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 78 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 79 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 80 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 81 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 82 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 83 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 84 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 85 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 86 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 87 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 88 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 89 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 90 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 91 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 92 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 93 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 94 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 95 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 96 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 97 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 98 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
 99 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
100 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
101 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
102 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
103 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
104 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
105 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
106 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
107 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
108 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
109 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
110 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
111 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
112 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
113 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
114 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
115 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
116 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
117 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
118 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
119 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
120 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
121 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
122 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
123 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
124 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
125 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
126 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
127 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
128 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
129 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
130 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
131 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
132 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
133 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
134 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
135 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
136 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
137 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
138 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
139 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
140 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
141 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
142 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
143 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
144 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
145 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
146 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
147 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
148 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
149 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
150 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
151 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
152 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
153 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
154 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
155 </body>
156 </html>

转载于:https://www.cnblogs.com/darkterror/p/5007483.html

鸿蒙ArkTS实现返回顶部按钮
lcyuanyuan的博客
08-23 1506
在日常各种应用中，可以发现在往下滚动一定距离的时候，右下角会自动弹出一个按钮，点击以后可以返回到页面顶部，那么在ArkTS中，这个功能如何实现呢？主要以使用Scroll组件为主，当然List也同理。
JavaScript实现返回顶部按钮
weixin_46325878的博客
04-20 706
利用滚动事件（scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮，立即跳到最顶部。
Vue 自定义返回顶部按钮
z772330927的博客
10-10 2997
Vue 实现返回顶部按钮 <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 <d
返回顶部按钮案例
小白小白从不日别的博客
04-16 1023
是
html5 按钮回到顶部,html页面添加返回顶部按钮
weixin_29981095的博客
07-03 2154
html：css：.box {width: 100%;height: 100px;background: skyblue;}.box1 {width: 100%利用 jQuery 中的animate和scrollTop方法，你无需插件就可以创建简单的 scroll up 效果:// 返回顶部$('a.top').http://www.zhangxinxu.com/study/201104/...
【前端】HTML底部返回顶部悬浮按钮
热门推荐
野生Java小菜鸟的博客
05-29 1万+
CSS样式： .back-to { bottom: 55px; overflow: hidden; position: fixed; right: 10px; width: 110px; z-index: 999; } .back-to .back-top { background: url("./imag...
利用css实现返回顶部按钮
jfukg的博客
04-28 1985
利用css实现返回顶部按钮 <body> <div id="header" class="header">头部</div> <div class="buttom">尾部</div> <!-- 返回顶部 --> <a class="topa" href="#header"> <div class="topb " style="display:block ">返回顶部&
jquery返回顶部按钮（随滚动位置显示隐藏）
cai niaoyihao_的博客
05-14 839
使用jQuery做“返回顶部”，按钮随页面滚动位置显示隐藏。
Vue 实现返回顶部按钮
10-21 836
Vue 实现返回顶部按钮 <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源 &lt
uniapp返回顶部按钮
peijiajing的博客
10-30 2209
上代码 自己试验 <template> <view> <!-- 置顶按钮 --> <image src="图片" class="back_yuan" mode="" v-if="back" @tap="backtop"></image> </view> </template> <script> export default { data() { return { // 返回顶部按钮的隐藏
返回顶部按钮
02-22
返回顶部按钮是网页设计中一个常见且实用的功能，它允许用户快速回到页面的顶部，而无需手动滚动。在本文中，我们将深入探讨如何利用HTML、CSS和JavaScript这三种核心技术来实现这一功能，遵循巴波亚法则，提升用户...
javascript实现博客园页面右下角返回顶部按钮
10-02
标题中的“javascript实现博客园页面右下角返回顶部按钮”是指使用JavaScript编程语言来创建一个功能，该功能在用户滚动页面时，会在页面的右下角显示一个图标或按钮，当用户点击这个按钮时，页面会平滑地滚动回顶部...
javascript中返回顶部按钮的实现
12-10
在JavaScript中，实现返回顶部按钮是一项常见的网页交互功能，它能帮助用户轻松地将页面滚动回顶部。在给出的代码示例中，我们看到两种不同的方法来实现这一功能。 首先，我们关注的是一个简单的返回顶部按钮，这个...
基于Javascript实现返回顶部按钮
10-22
标题中的“基于Javascript实现返回顶部按钮”是指使用JavaScript编程语言来创建一个功能，当用户浏览网页至页面底部时，提供一个便捷的按钮让用户快速回到页面的顶部。这种功能对于长内容页面尤其有用，因为它提高了...
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
东城绝神
09-12 549
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
前后端开发Mock作用说明，mock.ts
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
09-12 376
mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。
JavaScript的功能和作用
2402_83164836的博客
09-10 502
JavaScript（简称 JS）是一种​​，最初设计用于为网页添加动态交互功能。经过多年发展，其应用场景已远超浏览器，成为覆盖前端、后端、移动端、桌面端甚至物联网等领域的“全场景语言”。
＜uniapp＞＜指针组件＞基于uniapp，编写一个自定义箭头指针组件
用沸腾的热血，支付我们的人生吧！
09-10 412
本文介绍了基于uniapp开发的自定义带箭头指针组件，通过SVG实现直线和箭头的组合效果。组件支持设置长度、颜色、角度等参数，并提供三种箭头规格(small/normal/big)可选。文章详细讲解了SVG结构的实现过程，包括计算终点坐标、响应式参数处理等核心功能，并展示了不同配置下的指针效果。该组件可用于时钟指针等场景，具有灵活性和复用性特点。
JavaScript经典面试题二（函数和作用域）
最新发布
weixin_43746297的博客
09-12 981
摘要：本文系统介绍了JavaScript中12个核心函数概念，包括闭包、作用域、函数绑定方法、高阶函数、箭头函数、生成器函数、防抖节流、递归、纯函数、函数重载和偏函数。重点解析了闭包的定义、实现原理及4种应用场景；详细对比了call/apply/bind三者的区别；深入探讨了箭头函数与普通函数的4个关键差异；分析了防抖节流的实现逻辑和应用场景；总结了递归的优缺点和使用建议；阐释了纯函数的定义和优势；说明了如何在JavaScript中模拟函数重载；介绍了偏函数的概念和实现方式。这些内容全面覆盖了JavaScr
创意返回顶部按钮动画设计指南
根据提供的文件信息，我们可以看出需要讨论的是关于返回顶部按钮动画设计的知识点。在Web开发和移动应用设计中，返回顶部按钮是一个常见功能，它能够帮助用户快速回到页面或屏幕的顶部。设计一个优秀的返回顶部按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值