javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果。分享给大家供大家参考，具体如下：
比较优秀的一款超过一屏高度才显示的，跟随滚动条漂浮的返回顶部按钮特效代码。
运行效果如下图所示：
完整实例代码如下：
<!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>test</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> </head> <body> <div class="rTop" id="rTop">返回顶部</div> <script> window.onscroll=function(){ if(document.body.scrollTop||document.documentElement.scrollTop>0){ document.getElementById('rTop').style.display="block" }else{ document.getElementById('rTop').style.display="none" } } </script> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍jQuery 顶部导航跟随滚动条滚动固定浮动在顶部，包括了jQuery 顶部导航跟随滚动条滚动固定浮动在顶部的使用技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍javascript中返回顶部按钮的实现，包括了javascript中返回顶部按钮的实现的使用技巧和注意事项，需要的朋友参考一下 炫酷的返回顶部功能 js核心代码 html 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍基于Javascript实现返回顶部按钮，包括了基于Javascript实现返回顶部按钮的使用技巧和注意事项，需要的朋友参考一下 一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现
-
本文向大家介绍javascript返回顶部的按钮实现方法，包括了javascript返回顶部的按钮实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例介绍了javascript返回顶部的按钮实现方法，分享给大家供大家参考，具体内容如下 html: css: script: 获取滚动条高度:document.documentElement.scrollTop || document.body.
-
本文向大家介绍简单几步实现返回顶部效果，包括了简单几步实现返回顶部效果的使用技巧和注意事项，需要的朋友参考一下 今天与大家分享下网页中经常出现的返回顶部效果 相比原生Javascript，jquery实现起来能够省略不少代码。 接下来就直接贴代码啦： ok，是不是很简单，jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。 以上就是本文的全部内容，希望对大家有所帮助，同
-
本文向大家介绍JavaScript实现带缓冲效果的随屏滚动漂浮广告代码，包括了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码。分享给大家供大家参考，具体如下： 这里演示了始终随屏滚动的JavaScript代码，在国内的应用泛滥成灾了，特别是一些喜欢漂浮广告的站长，常把本代码用作