返回顶部按钮的做法

　　注意：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>
时间： 2024-10-25 15:43:00

返回顶部按钮的做法的相关文章

在octopress中增加“返回顶部”按钮

通过"返回顶部"按钮,可以快速返回页首.配置按照Octopress主题样式修改一文.但照着做下来并不能实现配置.因此到疑似作者812lcl的github仓库中找了最新版本的配置. javascripts脚本 新建一个文件source/javascripts/top.js.它的最新版本在: https://github.com/812lcl/812lcl.github.com/blob/source/source/javascripts/top.js 显示按钮 显示按钮需要新建sourc

JS——给网页添加返回顶部按钮

在页面右下方添加一个返回顶部按钮,当页面滑到一定位置时,按钮出现,否则消失,默认隐藏 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ wid

jQuery实现返回顶部按钮功能

html结构 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <span class="toolbar-btn" id="backtop"> <i class="toolbar-icon icon-upload2"></i> //图标字体 &l

【Android】ListView监听上下滑动（判断是否显示返回顶部按钮）

设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮(具体逻辑请看代码--附有详细注释). 下载地址:http://www.dwz.cn/zG99W 源码运行动态图

微网站自动显示 返回顶部 按钮 的代码

//返回顶部 var globalScrollTop = $(document).height() - $(window).height(); function showBackToTop() { if ($(window).scrollTop() > globalScrollTop) { $("#divTop").show(); } else { $("#divTop").hide(); } } //页面滚动时,“返回顶部”按钮 是否显示 $(window)

“返回顶部”按钮

实现过程 当页面滚动时(监听scroll事件),浏览器滚动条处于最顶部时,隐藏“返回顶部”按钮,当滚动条继续向下滚动时,动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值,如果这个值大于某个特定的数字时,显示“返回顶部”按钮,否则隐藏.然后,当单击“返回顶部”按钮时,其实应该是一个链接,将滚动条滚回浏览器最顶部.在这个过程中,我们可以使用animate来创建动画效果,即返回顶部时有个过渡效果. $(function(){ $(".backToTop").goToTo

返回顶部按钮功能的实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toTop</title> <style type="text/css"> *{ margin:0; padding: 0; } html{ height: 100%; } .toTopBtn{ position: fixed

在页面中有overflow-y:auto属性的div,当出现滚动条，点击返回顶部按钮，内容回这个div最顶部

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .lala{ width: 10%; background: pink; color: #333; height: 200px; overfl

android判断位置显示返回顶部按钮最精简代码

listView.setOnScrollListener(new OnScrollListener() { @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { updateBackTopButtonState(); }}); private void updateBackTopButtonState() { if (ad