回到顶部按钮
2017-11-22 17:23
239 查看
这个回到顶部按钮大家到处都可以看到,今天终于自己做了一个,分享给大家
css样式
jquery代码
html部分
效果图
css样式
<style type="text/css"> #go_top { display: none; position: fixed; width: 40px; bottom: 25px; padding: 10px 8px; color: #666; background: #ECECEC; cursor: pointer; font: 24px/12px Helvetica,Arial,Verdana,sans-serif; opacity: 0.7; outline: 0 none; text-align: center; text-decoration: none; text-shadow: 0 0 1px #DDD; vertical-align: baseline; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } </style>
jquery代码
<script> $(document).ready(function(){ $(function () { //检测屏幕高度 var height=$('.row-fluid').offset().top; //scroll() 方法为滚动事件 $(window).scroll(function(){ if ($(window).scrollTop()>height){ $('#go_top').show(); }else{ $('#go_top').hide(); } }); $("#go_top").click(function(){ $('body,html').animate({scrollTop:0},100); return false; }); }); }); </script>
html部分
<div id="go_top" style="right:20px; a9f7 "> <p>▲</p> </div>
效果图
相关文章推荐
- back to top 回到顶部按钮 css+js
- 小程序回到顶部按钮(不依赖scroll-view) onReachBottom可用
- Android listview ,ScrollView 回到顶部的按钮
- listview下拉到一定位置显示回到顶部按钮
- jsp点击某个按钮回到顶部
- js隐藏与显示回到顶部按钮
- 回到顶部按钮
- android listview下滑出现回到顶部的按钮
- JS回到顶部按钮
- js+css实现回到顶部按钮(back to top)
- 超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码
- js隐藏与显示回到顶部按钮
- back to top 回到顶部按钮 css+js
- Joomla插件—Top of the Page回到顶部按钮-中文版发布
- 回到顶部按钮
- js 回到顶部按钮小例子
- 回到顶部(Top按钮)
- jQuery 跟随浏览器窗口的回到顶部按钮
- 2015.26.23_ScrollView点击按钮回到顶部
- 悬浮按钮点击回到顶部FloatingActionButton